# Khoảng cách

## 1. Mục tiêu

Giúp người thiết kế làm chủ không gian xung quanh và bên trong của các thành phần. Mục tiêu chính là tạo ra các khoảng trắng (white-space) hợp lý, giúp mắt người đọc dễ dàng điều tiết, phân biệt rõ các khối nội dung và nâng cao trải nghiệm người dùng tổng thể.

## 2. Khi nào dùng

Bạn nên điều chỉnh các thông số trong mục Spacing khi:

* Margin (Khoảng cách ngoài): Cần tạo khoảng trống giữa thành phần hiện tại với các thành phần khác xung quanh nó. Ví dụ: Đẩy nút bấm cách xa đoạn văn bản phía trên.
* Padding (Khoảng cách trong): Cần tạo khoảng trống giữa đường viền của khung với nội dung bên trong nó. Ví dụ: Tạo khoảng cách để chữ không bị dính sát vào mép của một cái khung (như hình minh họa nút Label).
* Tạo sự phân cấp: Sử dụng khoảng cách lớn để phân tách các Section khác nhau và khoảng cách nhỏ để nhóm các thành phần liên quan lại với nhau.

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

Để tùy chỉnh khoảng cách, bạn thực hiện theo trình tự sau tại mục Spacing:

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

* Bước 1: Chọn thành phần hoặc khối nội dung cần căn chỉnh trên giao diện builder.
* Bước 2: Tại bảng thuộc tính bên phải, tìm đến mục Spacing.
* Bước 3: Điều chỉnh giá trị tại ô Margin để thay đổi khoảng cách bên ngoài của khối (mặc định thường là 0px).
* Bước 4: Điều chỉnh giá trị tại ô Padding để thay đổi độ thông thoáng bên trong khối (mặc định thường là 0px).
* Bước 5: Bạn có thể chọn biểu tượng "+" bên cạnh để tùy chỉnh riêng biệt cho từng phía: Trên, Dưới, Trái, Phải.

## 4. Lưu ý

* Sự cân đối: Hãy luôn cố gắng giữ các giá trị Padding trái - phải hoặc trên - dưới bằng nhau để thành phần trông cân đối (như cách nhãn "Label" nằm gọn giữa khung).
* Đơn vị pixel: Hãy nhập giá trị kèm đơn vị px (ví dụ: 20px). Tránh để khoảng cách quá nhỏ khiến trang bị ngột ngạt.
* Mẹo thiết kế: Nếu bạn muốn thay đổi kích thước của một nút bấm mà không muốn cố định Width/Height, hãy tăng Padding để nút tự động to ra một cách tự nhiên theo nội dung.
* Thiết bị di động: Kiểm tra kỹ Margin trên điện thoại để đảm bảo thành phần không bị đẩy ra quá xa mép màn hình, gây lãng phí không gian hiển thị.


---

# 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/khoang-cach.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.