2.1 Lề trong (Padding)
Lề trong (padding) xác định khoảng cách giữa nội dung phần tử và các đường viền của nó. padding có thể được đặt
cho mỗi bên của phần tử: trên, phải, dưới và trái. Lề trong có thể hữu dụng để tạo khoảng trống xung quanh nội dung phần tử, để nó không bám sát vào các đường viền.
Ví dụ sử dụng
Trong ví dụ này, một phần tử với class .padding được áp dụng lề trong 20 pixel từ mọi phía,
tạo khoảng trống xung quanh nội dung.
.padding {
background-color: #e0e0e0;
padding: 20px;
border: 2px solid #000;
}
<div class="padding">
Đây là một phần tử với lề trong.
</div>
2.2 Lề ngoài (Margin)
Lề ngoài (margin) xác định khoảng cách giữa phần tử và các phần tử lân cận. Lề ngoài có thể
được đặt cho mỗi bên của phần tử: trên, phải, dưới và trái. Lề ngoài hữu ích để tạo
khoảng trống giữa các phần tử, để tránh chúng đè lên nhau.
Ví dụ sử dụng:
.margin {
background-color: #e0e0e0;
border: 2px solid #000;
margin: 20px;
}
<div class="margin">
Đây là một phần tử với lề ngoài.
</div>
2.3 Tương tác giữa các thành phần của mô hình khối
Cả bốn thành phần của mô hình khối (nội dung, lề trong, đường viền và lề ngoài) hoạt động cùng nhau để xác định kích thước tổng thể và vị trí của phần tử trên trang.
Ví dụ về tương tác giữa các thành phần:
.box {
background-color: #e0e0e0;
padding: 20px;
border: 5px solid #000;
margin: 30px;
width: 200px;
}
<div class="box">
Đây là một phần tử với lề ngoài và lề trong.
</div>
Giải thích mã code:
- Nội dung: văn bản bên trong phần tử
- Lề trong: 20 pixel tạo khoảng trống giữa nội dung và đường viền
- Đường viền: 5 pixel bao quanh phần tử
- Lề ngoài: 30 pixel tạo khoảng trống giữa phần tử và các phần tử khác trên trang
2.4 Lề ngoài âm
Lề ngoài có thể có giá trị âm, dẫn đến việc các phần tử chồng lên nhau.
.negative-margin {
background-color: #e0e0e0;
padding: 20px;
border: 2px solid #000;
margin-top: -12px;
}
<div>
Đây là một phần tử thông thường
</div>
<div class="negative-margin">
Đây là một phần tử với lề trên âm.
</div>
2.5 Sự sụp đổ của lề ngoài
Khi các lề ngoài thẳng đứng của hai khối lân cận gặp nhau, chúng có thể sụp đổ thành một lề duy nhất, bằng với giá trị lớn hơn trong hai giá trị.
.box1 {
background-color: #e0e0e0;
padding: 20px;
border: 2px solid #000;
margin-bottom: 30px;
}
.box2 {
background-color: #d0d0d0;
padding: 20px;
border: 2px solid #000;
margin-top: 20px;
}
<div class="box1">
Đây là phần tử đầu tiên.
</div>
<div class="box2">
Đây là phần tử thứ hai. Lề ngoài đã sụp đổ xuống còn 30 pixel.
</div>
GO TO FULL VERSION