Cải Thiện Bố Cục với Thuộc Tính Margin trong CSS

Thuộc Tính Margin trong CSS được sử dụng để tạo khoảng trống xung quanh các phần tử, bổ sung cho việc tạo đường viền trong văn bản. Hãy tham gia bài học dưới đây của Mytour để hiểu rõ hơn về chúng.

Cải Thiện Bố Cục với Thuộc Tính Margin trong CSS

1. Margin trong CSS

CSS cung cấp các thuộc tính để chỉ định và canh lề cho từng phần của một phần tử:

margin-top
margin-right
margin-bottom
margin-left

Tất cả các thuộc tính margin có thể chứa các giá trị sau:

- auto: tự động căn chỉnh lề trong trình duyệt.

- length: lề được định dạng bằng px, pt, cm, ... .

- %: lề được xác định dựa trên % chiều rộng của phần tử chứa.

- inherit: xác định lề sẽ được kế thừa từ phần tử cha.

Mẹo: giá trị âm cũng có thể được sử dụng.

Ví dụ: Trong ví dụ sau, căn chỉnh 4 lề khác nhau cho 4 phần của phần tử p:

Kết quả cuối cùng sẽ được hiển thị như sau:

1.1. Cách sử dụng thuộc tính Margin rút gọn

Để làm mã ngắn gọn, chúng ta có thể khai báo tất cả các thuộc tính margin trong một thuộc tính duy nhất.

Thuộc tính margin rút gọn, bao gồm các thuộc tính sau:

margin-top

lề-phải

lề-dưới

lề-trái

Trong đó:

- Trong trường hợp thuộc tính margin có 4 giá trị:

margin: 25px 50px 75px 100px;

Lề trên là 25px

Lề phải là 50px

Lề dưới được đặt là 75px

Lề trái có kích thước 100px

Ví dụ 1:

Kết quả cuối cùng sẽ xuất hiện như sau:

- Trong trường hợp thuộc tính margin có 3 giá trị:

margin: 25px 50px 75px;

Lề trên là 25px

Lề phải và trái được đặt là 50px

Lề dưới đặt là 75px

Ví dụ 2:

Kết quả cuối cùng sẽ hiển thị như sau:

- Trong trường hợp thuộc tính margin chỉ có 2 giá trị:

margin: 25px 50px;

Lề trên và dưới được đặt là 25px

Lề phải và trái được đặt là 50px

Ví dụ 3:

Kết quả cuối cùng sẽ xuất hiện như sau:

- Trong trường hợp thuộc tính margin chỉ có 1 giá trị:

margin: 25px;

Giá trị của cả 4 lề là 25px.

Ví dụ 4:

Kết quả cuối cùng sẽ xuất hiện như sau:

1.2. Giá trị auto

Chúng ta có thể đặt giá trị thuộc tính margin là auto để tự động căn chỉnh giữa các phần tử bên trong container của nó.

Phần tử sẽ sử dụng chiều rộng được chỉ định và phần còn lại của không gian trống sẽ được phân chia đều giữa lề trái và lề phải.

Ví dụ:

Kết quả cuối cùng sẽ xuất hiện như sau:

1.3. Giá trị inherit

Trong ví dụ này, lề trái của phần tử (p class='ex1') được kế thừa từ phần tử cha (div).

Ví dụ:

Kết quả cuối cùng sẽ xuất hiện như sau:

1.4. Hiện Tượng Gộp Lề (Margin Collapse) trong CSS

Có những khi chúng ta có thể hợp nhất lề trên và dưới của các phần tử thành một lề duy nhất bằng cách tính tổng của hai lề.

Chú Ý: Phương pháp này chỉ áp dụng cho lề trên và lề dưới, không áp dụng cho lề trái và lề phải.

Ví Dụ:

Kết quả cuối cùng sẽ xuất hiện như sau:

Trong ví dụ trên, lề phía dưới của phần tử h1 là 50px và lề phía trên của phần tử p là 20px.

Tổng giá trị của 2 lề là 70 px (50px + 20px), tuy nhiên do hiện tượng margin collapse gộp các lề lại nên giá trị lề thực tế là 50px.

1.5. Tổng Quan Các Thuộc Tính Margin trong CSS

Dưới đây là bảng danh sách các thuộc tính Margin trong CSS:

Bài học CSS trên đã giới thiệu về các thuộc tính Margin. Trong các bài học tiếp theo, sẽ có phần giới thiệu về cách định dạng danh sách trong CSS.