Admin
23/08/2023
Share
Khi bạn học về Box Model trong CSS, bạn sẽ nhận thấy rằng khi sử dụng Padding và Border, kích thước của khung phần tử sẽ bị thay đổi nếu bạn cũng đặt thuộc tính width và height để thiết lập kích thước cho nó. Ví dụ, nếu khung của bạn có width là 500px và height là 500px (500×500 px), nếu bạn thêm padding là 15px, kích thước của khung sẽ trở thành 530×530 px. Điều này xảy ra vì khi bạn thêm padding là 15px, khung của bạn sẽ tự động tăng thêm 30px (15px cho top và bottom, cũng như left và right), tương tự cho border.
Để giữ nguyên kích thước của phần tử mà vẫn có thể thêm padding và border, chúng ta cần sử dụng thuộc tính box-sizing. Thuộc tính này cho phép tính toán và điều chỉnh kích thước của phần tử dựa trên width và height đã được thiết lập. Nói cách khác, width và height sẽ bao gồm cả border và padding.
Lưu ý về cách viết
Box-sizing là một thuộc tính trong CSS3, khi viết bạn phải viết thành 3 lần với các tiền tố khác nhau. Ví dụ:
Box-sizing: border-box;.
-moz-Box-sizing: border-box;.
-webkit-Box-sizing: border-box;.
Nếu không có tiền tố, viết cho trình duyệt IE8, Opera 7, Firefox và Google Chrome bản mới. -Webkit viết cho Google Chrome bản cũ và -moz viết cho Firefox bản cũ.
Các giá trị của box-sizing
Hiện nay, box-sizing hỗ trợ một số giá trị như sau:.
Lưu ý: padding-box chỉ có hiệu quả với trình duyệt Firefox.
Với ba giá trị này, mình khuyến khích các bạn chỉ nên sử dụng giá trị border-box vì nó rất đầy đủ và dễ tính toán cho website.
Nên sử dụng box-sizing cho toàn bộ phần tử
Khi viết CSS cho website, tôi khuyên bạn nên sử dụng box-sizing với giá trị là border-box cho tất cả các phần tử trong website. Điều này giúp các phần tử có kích thước chính xác khi bạn khai báo, tránh việc cộng thêm các phần border và padding gây ra rắc rối nếu bạn thường xuyên sử dụng hai thuộc tính này.
Để áp dụng box-sizing: content-box cho tất cả các phần tử, ta có thể sử dụng ký tự * để chọn tất cả các phần tử.
Box-sizing: border-box;.
-moz-Box-sizing: border-box;.
-webkit-Box-sizing: border-box;.
Lời kết
Dù có thể không cần thiết, nhưng việc sử dụng box-sizing có thể giải thích về việc tại sao kích thước của một phần tử lại hiển thị khác nhau khi thêm padding và border vào nó. Đồng thời, trong một số trường hợp, việc điều chỉnh giá trị box-sizing cũng giúp quản lý kích thước của các phần tử dễ dàng hơn.
