{"id":14455,"date":"2012-07-30T21:01:08","date_gmt":"2012-07-30T13:01:08","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=14455"},"modified":"2025-04-04T01:11:27","modified_gmt":"2025-04-03T17:11:27","slug":"css3-box-sizing","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css3-box-sizing\/","title":{"rendered":"A Look Into: CSS3 Box-sizing"},"content":{"rendered":"

Not too long ago, when we designed a box<\/strong> on a webpage using a div<\/code> element, we typically set both width and height to 100px<\/code>, adding 10px<\/code> of padding<\/code> and 10px<\/code> borders.<\/p>\n

\r\n div {\r\n   width: 100px;\r\n   height: 100px;\r\n   padding: 10px;\r\n   border: 10px solid #eaeaea;\r\n }\r\n<\/pre>\n
This setup would cause browsers to increase the box\u2019s size to 140px. The total width or height, 140px, comprises the original width\/height<\/code> plus twice the padding<\/code> and twice the border<\/code> thickness, calculated as 100px [width\/height] + (2 x 10px [padding]) + (2 x 10px [border])<\/strong>.<\/p>\n
\"CSS<\/figure>\n
However, there are times when we want our box to maintain a consistent size of 100px<\/code>, regardless of any padding or borders we add.<\/p>\n
To address this common challenge in web page layout design, we can utilize the CSS3 box-sizing<\/code> property. This allows us to dictate how the CSS box model<\/a><\/strong>.<\/p>\n
Mastering box-sizing<\/h2>\n
The box-sizing<\/code> property offers two choices: content-box<\/code>, which is the default setting where the box model expands as previously described, and border-box<\/code>. The latter option ensures the dimensions of the box are maintained as specified, with padding and borders included within the box\u2019s total width and height.<\/p>\n
\r\ndiv {\r\n  width: 100px;\r\n  height: 100px;\r\n  padding: 10px;\r\n  border: 10px solid #eaeaea;\r\n  box-sizing: border-box;\r\n  -moz-box-sizing: border-box; \/* Firefox 1-3 *\/\r\n  -webkit-box-sizing: border-box; \/* Safari (old) *\/\r\n}\r\n<\/pre>\n
With border-box<\/code>, a box set to 100px square, factoring in 10 pixels for padding and borders, effectively sizes its content to 60px<\/code> to keep the box\u2019s outer dimensions at 100px<\/code>. This calculation subtracts padding and borders from the overall dimensions, ensuring the box size remains constant.<\/p>\n
\"CSS<\/figure>\n
Compatibility across browsers<\/h2>\n
The box-sizing<\/code> property is well-supported across modern browsers, including Firefox 3.6+, Safari 3, Opera 8.5+, and Internet Explorer 8 and newer. Thus, if your site\u2019s audience primarily uses these or later versions, leveraging this property can enhance layout design significantly.<\/p>\n
\r\nbox-sizing: border-box;\r\n-moz-box-sizing: border-box; \/* Firefox 1-3 *\/\r\n-webkit-box-sizing: border-box; \/* Safari *\/\r\n}\r\n<\/pre>\n
Implementing the above CSS snippet universally applies the box-sizing<\/code> rule to all elements on your site, simplifying layout management and ensuring consistency across various components.<\/p>\n
Practical Application<\/h2>\n
In this example, we\u2019ll illustrate the practical use of the box-sizing<\/code> property by creating a straightforward navigation bar. This bar will contain five links, structured using the following HTML code:<\/p>\n
\r\n<ul>\r\n  <li><a href=\"#\">Menu 1<\/a><\/li>\r\n  <li><a href=\"#\">Menu 2<\/a><\/li>\r\n  <li><a href=\"#\">Menu 3<\/a><\/li>\r\n  <li><a href=\"#\">Menu 4<\/a><\/li>\r\n  <li><a href=\"#\">Menu 5<\/a><\/li>\r\n<\/ul>\r\n<\/pre>\n
To enhance its appearance, we\u2019ll define a fixed width of 500px<\/code> for the navigation bar and set each link to 100px<\/code> wide. We\u2019ll align the list items horizontally and assign unique background colors to each link for visual distinction.<\/p>\n
\r\nnav {\r\n  width: 500px;\r\n  margin: 50px auto 0;\r\n  height: 50px;\r\n}\r\nnav ul {\r\n  padding: 0;\r\n  margin: 0;\r\n}\r\nnav li {\r\n  float: left;\r\n}\r\nnav a {\r\n  display: inline-block;\r\n  width: 100px;\r\n  height: 100%;\r\n  background-color: #ccc;\r\n  color: #555;\r\n  text-decoration: none;\r\n  font-family: Arial, sans-serif;\r\n  font-size: 12pt;\r\n  line-height: 300%;\r\n  text-align: center;\r\n}\r\nnav li:nth-child(1) a {\r\n  background-color: #E9E9E9;\r\n  border-left: 0;\r\n}\r\nnav li:nth-child(2) a {\r\n  background-color: #E4E4E4;\r\n}\r\nnav li:nth-child(3) a {\r\n  background-color: #DFDFDF;\r\n}\r\nnav li:nth-child(4) a {\r\n  background-color: #D9D9D9;\r\n}\r\nnav li:nth-child(5) a {\r\n  background-color: #D4D4D4;\r\n  border-right: 0;\r\n}\r\n<\/pre>\n
Initially, our navigation appears standard.<\/p>\n
\"Standard<\/figure>\n
Yet, challenges emerge upon introducing left or right borders to the links. This addition increases each link\u2019s width from 100px<\/code> to 102px<\/code>, unexpectedly extending the total width of the navigation beyond the intended 500px<\/code>.<\/p>\n
\r\nnav a {\r\n  border-left: 1px solid #aaa;\r\n  border-right: 1px solid #f3f3f3;\r\n  box-sizing: border-box;\r\n  -moz-box-sizing: border-box;\r\n  -webkit-box-sizing: border-box;\r\n}\r\n<\/pre>\n
\"Navigation<\/figure>\n
To rectify this, implementing the box-sizing<\/code> attribute ensures that the navigation\u2019s dimensions remain consistent, inclusive of border thickness.<\/p>\n
Expand Your Knowledge<\/h2>\n
For those eager to delve further into CSS intricacies, here are some handpicked resources:<\/p>\n