Kích thước hộp CSS
Kích thước hộp CSS
Thuộc tính CSS box-sizing
cho phép chúng ta bao gồm phần đệm và đường viền trong tổng chiều rộng và chiều cao của phần tử.
Không có thuộc tính kích thước hộp CSS
Theo mặc định, chiều rộng và chiều cao của một phần tử được tính như sau:
chiều rộng + phần đệm + đường viền = chiều rộng thực tế của một phần tử
chiều cao + phần đệm + đường viền = chiều cao thực tế của một phần tử
Điều này có nghĩa là: Khi bạn đặt chiều rộng/chiều cao của một phần tử, phần tử đó thường xuất hiện lớn hơn mức bạn đã đặt (vì đường viền và phần đệm của phần tử được thêm vào chiều rộng/chiều cao được chỉ định của phần tử).
Hình minh họa sau đây cho thấy hai phần tử <div> có cùng chiều rộng và chiều cao được chỉ định:
Hai phần tử <div> ở trên có kích thước khác nhau trong kết quả (vì div2 có phần đệm được chỉ định):
Ví dụ
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
Hãy tự mình thử » Thuộc box-sizing
giải quyết vấn đề này.
Với thuộc tính kích thước hộp CSS
Thuộc tính box-sizing
cho phép chúng ta bao gồm phần đệm và đường viền trong tổng chiều rộng và chiều cao của phần tử.
Nếu bạn đặt box-sizing: border-box;
trên một phần tử, phần đệm và đường viền được bao gồm trong chiều rộng và chiều cao:
Đây là ví dụ tương tự như trên, với box-sizing: border-box;
được thêm vào cả hai phần tử <div>:
Ví dụ
.div1 {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
}
Hãy tự mình thử » Do kết quả của việc sử dụng box-sizing: border-box;
tốt hơn rất nhiều, nhiều nhà phát triển muốn tất cả các thành phần trên trang của họ hoạt động theo cách này.
Mã bên dưới đảm bảo rằng tất cả các phần tử đều được định kích thước theo cách trực quan hơn này. Nhiều trình duyệt đã sử dụng box-sizing: border-box;
đối với nhiều thành phần biểu mẫu (nhưng không phải tất cả - đó là lý do tại sao đầu vào và vùng văn bản trông khác nhau ở chiều rộng: 100%;).
Áp dụng điều này cho tất cả các phần tử là an toàn và khôn ngoan:
Thuộc tính định cỡ hộp CSS
Property | Description |
---|---|
box-sizing | Defines how the width and height of an element are calculated: should they include padding and borders, or not |