Margin - Lề trong CSS

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

Các cạnh của lề trong CSS

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

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

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

Có thể dùng giá trị âm. Ví dụ dưới đây tạo lề khác nhau cho 4 cạnh của phần tử <p>:

p {
 margin-top: 100px;
 margin-bottom: 100px;
 margin-right: 150px;
 margin-left: 80px;
}

Đặc tính rút gọn của lề trong CSS

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

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

Nếu đặc tính margin có 4 giá trị

margin: 25px 50px 75px 100px;

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

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

Nếu đặc tính margin có 3 giá trị

margin: 25px 50px 75px;

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

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

Nếu đặc tính margin có 2 giá trị

margin: 25px 50px;

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

p {
 margin: 25px 50px;
}

Nếu đặc tính margin có 1 giá trị

margin: 25px;

• tất cả các lề đều là 25px

p {
 margin: 25px;
}

Giá trị mặc định

Khi đặt đặ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.

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

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

Ví dụ này đặt lề trái của phần từ <p class=”ex1”> kế thừa từ phần tử mẹ là <div>

div {
 border: 1px solid red;
 margin-left: 100px;
}

p.ex1 {
 margin-left: inherit;
}

Margin Collapse

Đô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. Việc 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.

h1 {
 margin: 0 0 50px 0;
}

h2 {
 margin: 20px 0 0 0;
}

Ở ví dụ trên, lề dưới của <h1> là 50px và lề trên của <h2> là 20px. Thông thường phần lề giữa <h1> và <h2> sẽ là tổng của cả 2 (tức là 70px = 50px + 20px) nhưng do việc gộp lề mà phần lề này chỉ là 50px.

Bài trước: Đường viền trong CSS

Bài sau: Padding trong CSS