Làm việc với padding (khoảng đệm) trong CSS
Giả sử chúng ta đặt chiều rộng cho một phần tử là
100px. Trong CSS, điều này hoàn toàn không có nghĩa là
phần tử đó thực sự sẽ có chiều rộng
100px. Vấn đề là việc thêm
padding sẽ mở rộng phần tử và nó trở nên
lớn hơn so với giá trị được chỉ định trong thuộc tính width.
Hãy xem xét một ví dụ. Chúng ta sẽ tạo hai
khối, đặt chiều rộng cho chúng là 100
pixel. Đồng thời, chúng ta đặt
padding cho khối thứ hai, còn khối đầu tiên thì không. Kết quả là
khối thứ hai sẽ lớn hơn với kích thước bằng khoảng đệm:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
background: #f1f1f1;
margin-bottom: 20px;
}
#elem2 {
padding: 25px; /* thiết lập khoảng đệm */
width: 100px;
height: 100px;
background: #f1f1f1;
}
:
