Thuộc tính box-sizing
Thuộc tính box-sizing: Xác định lại chiều rộng và chiều cao cho thành phần.
HTML viết:
<html> <head></head> <body> <p class="normal">Không sử dụng box-sizing</p> <p class="contentBox">box-sizing: content-box</p> <p class="borderBox">box-sizing: border-box</p> </body> </html>
CSS viết:
p { background: #cccccc; border: 5px solid #cc0000; height: 100px; width: 200px; }
Hiển thị trình duyệt khi chưa có box-sizing:
Không sử dụng box-sizing
box-sizing: content-box
box-sizing: border-box
Thêm thuộc tính box-sizing, CSS viết:
p { background: #cccccc; border: 5px solid #cc0000; height: 100px; width: 200px; } p.contentBox { box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; } p.borderBox { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
Hiển thị trình duyệt khi có box-sizing:
Không sử dụng box-sizing
box-sizing: content-box
box-sizing: border-box
Ta thấy với giá trị border-box, chiều rộng và chiều cao hiện tại của thành phần đã bao gồm luôn phần border.