Theo định nghĩa từ trang www.w3schools.com, CSS property box-sizing sẽ quyết định xem chiều rộng và cao của một element sẽ được tính như thế nào, có bao gồm cả padding và border hay không. (hình ảnh từ đây)
Mục lục
box-sizing: content-box (CSS mặc định của trình duyệt):
Property này có nghĩa là width và height được set chỉ dược apply cho element đó thôi, bạn hãy nhìn vào ví dụ div #example1 ở dưới sẽ hiểu rõ hơn
#example1 {
box-sizing: content-box;
width: 300px;
height: 500px;
padding: 30px;
border: 10px solid blue;
}box-sizing: border-box:
Property này có nghĩa là width và height sẽ bao gồm luôn cả padding và border, bạn hãy nhìn vào ví dụ div #example2 ở dưới sẽ hiểu rõ hơn
#example2 {
box-sizing: border-box;
width: 300px;
height: 500px;
padding: 30px;
border: 10px solid blue;
}Bạn nên sử dụng border-box vs content-box?
Đầu tiên, hãy tưởng tượng một ngày, bạn đã code một cái element <div> nào đó, nhưng đến cuối ngày QC lại nhắn bạn thêm border và chút padding cho đẹp. Task đơn giản đó không thể làm khó bạn, nhưng điều làm bạn cực kì khó chịu là kích thước của <div> đã không còn như bạn mong muốn lúc đầu nữa. Bạn lại phải chỉnh lại giá trị width và height, trừ đi giá trị padding và border bạn đã thêm để có được cái <div> như ban đầu. Đấy là lí do đơn giản nhất để bạn không nên sử dụng content-box. Còn một lỗi khó chịu khác khi sử dụng content-box là child element có thể bị tràn ra khỏi parent element. Các bạn có thể dễ dàng xem trên codepen sau:
See the Pen content box by minhchau (@ngocminhxx) on CodePen.
Box sizing content-box là giá trị mặc định của trình duyệt. Do đó, bạn cần setting CSS cho tất cả element về box sizing border-box để thuận tiện hơn trong việc tính toán và coding nhé. Chúc các bạn vui!!!
/* CSS snippet
1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
box-sizing: border-box;
}Tính tương thích của box-sizing với các trình duyệt
