Thuộc tính box sizing được sử dụng để thay đổi chiều cao và độ rộng của phần tử.
Bắt đầu từ CSS2, thuộc tính box làm việc như sau:
width + padding + border = chiều rộng thực sự của một phần tử box height + padding + border = chiều cao thực sự của một phần tử box
Nghĩa là, khi bạn đã xác định chiều cao và chiều rộng, thì kích cỡ của box sẽ lớn hơn một chút do phải cộng thêm padding và border vào chiều cao và độ rộng bạn đã thiết lập.
Thuộc tính sizing trong CSS2
Ví dụ sau minh họa cách sử dụng của thuộc tính sizing trong CSS2:
<html> <head> <style> .div1 { width: 200px; height: 100px; border: 1px solid green; } .div2 { width: 200px; height: 100px; padding: 50px; border: 1px solid pink; } </style> </head> <body> <div class="div1">Hoc CSS co ban tai HocTV</div></br> <div class="div2">Hoc CSS co ban tai HocTV</div> </body> </html>
Kết quả là:
