Ví dụ về thuộc tính box-sizing

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.

box

box-shadow