# Chiều rộng và chiều cao

## 1. Mục tiêu

Giúp người thiết kế kiểm soát chính xác không gian chiếm chỗ của từng thành phần trên giao diện. Mục tiêu chính là đảm bảo bố cục trang đích luôn cân đối, phản hồi tốt trên nhiều kích thước màn hình và tối ưu hóa cách sắp xếp nội dung từ đơn giản đến phức tạp.

## 2. Khi nào dùng

Bạn nên điều chỉnh bộ thông số Width & Height trong các kịch bản sau:

<figure><img src="/files/IgUlzwEJgecvNE2DII0V" alt=""><figcaption></figcaption></figure>

* Thiết kế linh hoạt (Responsive): Khi muốn các khối nội dung tự động co giãn theo lượng chữ hoặc kích thước màn hình của người dùng.
* Cố định bố cục: Khi cần một kích thước chính xác cho các thành phần đặc thù như Logo, Banner quảng cáo hoặc các nút bấm có kích thước quy chuẩn.
* Lấp đầy không gian: Khi muốn một thành phần (như hình ảnh hoặc màu nền) tự động kéo dài để phủ kín khoảng trống còn lại trong một Section.

## 3. Các bước thực hiện

Để thiết lập kích thước cho thành phần, bạn thực hiện theo trình tự sau:

* Bước 1: Chọn thành phần bạn muốn điều chỉnh kích thước trên màn hình thiết kế.
* Bước 2: Tại bảng thuộc tính bên phải, tìm đến mục Width (Chiều rộng) hoặc Height (Chiều cao).
* Bước 3: Chọn một trong 4 phương thức thiết lập sau:

<figure><img src="/files/9omNITqk9mYYwqxfVjbl" alt=""><figcaption></figcaption></figure>

* Auto (Tự động): Hệ thống tự tính toán kích thước dựa trên các yếu tố xung quanh.
* Fit Content (Vừa vặn nội dung): Khung sẽ tự động co giãn để vừa khít với nội dung (chữ hoặc hình ảnh) bên trong nó.
* Stretch (Kéo giãn): Thành phần sẽ tự động kéo dài để lấp đầy khoảng trống còn lại của khung cha.
* Số cố định: Nhập trực tiếp giá trị vào ô (Ví dụ: 450px).
* Bước 4: Quan sát sự thay đổi trên giao diện và kiểm tra trên các chế độ xem khác nhau (Desktop/Mobile).

## 4. Lưu ý

* Ưu tiên Fit Content cho nút bấm: Đối với các nút bấm (Button) hoặc nhãn (Label), việc sử dụng Fit Content giúp nút luôn bao quanh chữ một cách hoàn hảo, bất kể bạn thay đổi nội dung dài hay ngắn.
* Hạn chế số cố định trên Mobile: Tránh việc nhập số px quá lớn cho chiều rộng khi thiết kế giao diện di động, vì điều này có thể gây ra lỗi tràn màn hình ngang.
* Kết hợp Stretch và Flex: Tính năng Stretch hoạt động hiệu quả nhất khi nằm trong một khung cha có cấu trúc lưới hoặc hàng, giúp tạo ra các cột có chiều cao bằng nhau một cách tự động.
* Kiểm tra đơn vị: Hãy chắc chắn bạn đã nhập đúng đơn vị (thường là px) khi sử dụng số cố định để tránh những sai lệch không đáng có trong bố cục.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.mhiring.vn/mcms/thiet-ke-van-ban/kich-thuoc-van-ban/chieu-rong-va-chieu-cao.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.