Đặc tính margin trong CSS bạn nên biết

Đặc tính margin (canh lề) trong CSS được dùng để tạo khoảng trắng xung quanh phần tử và bên ngoài các đường viền. Đặc tính này sẽ đặt lề cho cạnh trên, dưới, trái, phải của các phần tử.

Trong CSS có các đặc tính xác định lề cho từng cạnh trong phần tử:

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

Các đặc tính lề có thể có các giá trị sau:

• Giá trị auto - trình duyệt tự tính lề
• Giá trị inherit - xác định lề kế thừa từ phần tử mẹ
• Giá trị length - xác định chiều cao lề theo px, pt, cm…
• Giá trị % - xác định lề theo % so với chiều rộng của phần tử

Ngoài ra bạn có thể dùng giá trị âm để tạo lề khác nhau cho 4 cạnh của phần tử:

p {
margin-top: 35px;
margin-bottom: 35px;
margin-right: 15px;
margin-left: 15px;
}

Để rút gọn code CSS, có thể đưa tất cả đặc tính lề vào một đặc tính margin duy nhất thay vì đặc tính riêng:

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

Nếu đặc tính margin có 4 giá trị như bên dưới 

margin: 15px 25px 15px 25px;

Thì nó có nghĩa là

lề trên 15px
lề phải 25px
lề dưới 15px
lề trái 25px

Cú pháp CSS như bên dưới

p {margin: 25px 50px 75px 100px;}

Nếu đặc tính margin có 3 giá trị như bên dưới

margin: 25px 50px 75px;

Thì nó có nghĩa là

lề trên 25px
lề trái và phải 50px
lề dưới 75px

Cú pháp CSS như bên dưới

p { margin: 25px 50px 75px;}

Nếu đặc tính margin có 2 giá trị như bên dưới

margin: 25px 50px;

Thì nó có nghĩa là

lề trên và dưới 25px
lề trái và phải 50px

Cú pháp CSS như bên dưới

p {margin: 25px 50px;}

Nếu đặc tính margin có 1 giá trị như bên dưới

margin: 25px;

Thì nó có nghĩa tất cả các lề đều là 25px
Cú pháp CSS như bên dưới

p {

margin: 25px;
}

Các giá trị mặc định

Khi đặt các đặc tính margin về giá trị auto, nó sẽ tự động căn giữa phần tử theo chiều ngang. Phần tử chiếm phần độ rộng định sẵn, còn lại sẽ được chia đều cho lề trái và phải.

Ví dụ:

div {
width: 250px;
margin: auto;
border: 1px solid red;
}

Giá trị inherit (Giá trị kế thừa)

Ví dụ ta đặt lề trái của phần từ <p class="post-snippet" kế thừa từ phần tử mẹ là

div {

border: 1px solid red;

margin-left: 30px;

}

p.post-snippet{

margin-left: inherit;

}

Đôi khi lề trên và lề dưới của các phần tử chồng vào nhau thành một lề duy nhất bằng kích thước của lề lớn hơn. Điều này chỉ xảy ra với lề trên và dưới chứ không xảy ra với lề trái và phải. Mong rằng bài viết này hữu ích cho bạn.