Hủy bỏ mở rộng phần tử trong CSS
Thông thường, việc mở rộng được mô tả trong các bài học trước là có hại
và bạn muốn loại bỏ nó. Để
làm điều này, CSS có thuộc tính box-sizing.
Nếu bạn đặt cho nó giá trị border-box,
thì cả padding lẫn đường viền đều sẽ không
mở rộng khối:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
background: #f1f1f1;
margin-bottom: 20px;
}
#elem2 {
width: 100px;
height: 100px;
background: #f1f1f1;
padding: 25px; /* thiết lập khoảng đệm */
border: 10px solid green; /* thiết lập đường viền */
box-sizing: border-box; /* hủy bỏ mở rộng */
}
:
Tự mình thử nghiệm thuộc tính đã mô tả
box-sizing.
