Guide: CSS3 Box-sizing: Tips and Tutorial
This series is dedicated to helping you become a better designer or developer. Check out our HTML5/CSS3 Tutorials for more tips and tricks.
Recently, when adding a box to a web page using a div, we can set the width and height to 100px, with 10px of padding and 10px of border.
The div element has a width of 100px, a height of 100px, 10px padding and a 10px solid border with the color #eaeaea.
The browsers will increase the size of the box to 140px, adding padding and borders of 10px each. This brings the total width/height up to 100px plus 20px for padding and borders.
Despite the padding and borders, there are times when a box must always be 100px in size.
The CSS3 box-sizing property can help web page designers avoid a common issue: the CSS box model not working as expected in browsers.
Using box-sizing
The box-sizing property has two values: content box, the default, and another. With content box, the box model behaves as expected.
The size of a border box is determined by subtracting the size of its content, plus any padding and borders.
The div element has a width of 100px, a height of 100px, and padding and border of 10px each. The box-sizing property is set to border-box for Firefox 1-3 and Safari.
The box’s content area shrinks to 60px while the total size remains 100px: subtracting (2 x 10px padding) plus (2 x 10px border) from the original width/height of 100px.
Browser support
All major browsers support the box’s format property, including Firefox 3.6+, Safari 3, Opera 8.5+ and Internet Explorer 8 and up.
Most visitors won’t need to worry about Internet Explorer versions lower than 8, according to Paul Irish.
The CSS property “box-sizing” can be used to ensure that the width and height of an element are calculated correctly, regardless of any borders or padding. This is supported by Firefox 1-3, Safari, and other web browsers.
All elements on a web page will have the box-sizing property applied to them, allowing for more control over their size and layout.
Example
A simple navigation with five link menus can be created using the box size property. Here’s an example of how to do it.
Adding decorative styles to a navigation menu can be done by setting the width of the navigation to 500px and the width of each link to 100px, then giving each link a different background color. To ensure that the total width of the navigation remains 500px, use box-sizing property. For more advanced styling, CSS3 properties such as box shadows and 3D rotation can be used.
Designers can customize the navigation menu by setting a fixed width of 500px and assigning each link a width of 100px. Additionally, they can assign different background colors to each list item to make them easier to distinguish.
The navigation bar has been given a width of 500px, a margin of 50px auto 0, and a height of 50px. The padding and margin for the list items have been set to 0. Each list item is floated left, and each link has an inline-block display with a width of 100px, height of 100%, color #555, no text decoration, Arial font family sans-serif font size 12pt line-height 300%, and text alignment center. The background colors for each link are #E9E9E9 (first), #E4E4E4 (second), #DFDFDF (third), #D9D9D9 (fourth) and #D4D4D4 (fifth). The first link has no border on the left side while the fifth link has no border on the right side.
Currently, the navigation appears to be functioning as expected.
Adding left or right boundaries to the link menu will cause a problem.
A one-pixel solid border of #aaa was added to the left side of the navigation anchor, while a one-pixel solid border of #f3f3f3 was added to the right side.
The navigation menu has been extended by 10px, now measuring 102px wide instead of the previously specified 500px.
The box-sizing property must be applied to solve this issue.
Navigation links now have a 1px solid border on the left and right, with box-sizing set to border-box for compatibility across browsers.
Read further
For those looking to explore further, here are some resources to get started.
Experts have identified a bug in Firefox’s implementation of the CSS Box Model, which can be solved by using the box-sizing property. Paul Irish, a web developer, has praised this solution as “Box-Sizing FTW” (For The Win).
CSS3 Box-sizing: Tips and Tutorial: benefits
Faq
Final note
We hope you enjoyed our guide on CSS3 Box-sizing. If you have any questions, please don’t hesitate to reach out. Show your support by sharing the article with your friends!
If you have any questions about the CSS3 Box-sizing: Tips and Tutorial guide, need to correct any misinformation, or want to add more methods, please contact us. We are available through our contact page and social media accounts (Whatsapp, Facebook, Twitter) and will respond within 24-48 hours (weekends excluded). For the latest software updates and discussion about any software in your pocket, join our Telegram channel.
