Box-sizing là thuộc tính quan trọng trong CSS3 , nó giúp bạn bao gồm luôn padding và border vào trong vùng độ rộng và cao của tag, làm cho tag không giãn thêm ra khi bạn dùng padding hay border, nhờ đó bạn tránh gặp rắc rối khi tag giãn ra rồi làm layout tan tành luôn.
<html><head>
<style>
.div1 {width: 300px; height: 100px; border: 1px solid blue;}
.div2 { width: 300px; height: 100px; border: 1px solid red; padding: 20px;}
.div3 { width: 300px; height: 100px; border: 1px solid green; padding: 20px;
box-sizing:border-box}
</style></head>
<body>
<div class="div1">
Bạn ta bảy chục tuổi xuân<br/>Giờ ngồi xem kiến hành quân thay người<br/>
May còn con kiến để chơi<br/>Có khi vạn sự ở đời con con</div> <br/>
<div class="div2">
Dễ từng lấp biển dời non<br/>Lưng còng mới được lon ton tuổi già<br/>
Góc vườn đàn kiến bò ra<br/>Kéo đi hàng dọc như là Trường Sơn.</div> <br/>
<div class="div3">
Nhớ ơi đồng đội chập chờn<br/>Chiến tranh bỏ lại cô đơn hòa bình<br/>
Ngồi chơi với kiến giật mình<br/>Một ta mà cả đội hình ngày xưa.</div>
</body></html>
