Get to know CSS3 Box Sizing

Hello web designers, this time tutorial-webdesign.com will discuss the box-sizing feature which is one of the built-in features of css3. Hopefully there are lessons to be learned from this article about box-sizing.

CSS3 Box Sizing

This feature is quite useful because it eliminates the headache that usually arises when we are making web layouts. Where we usually determine the width of the layout that we want first, after that determine the width of the sidebar and web content.

For example, the width of the layout is 800px. We divide it into 2 columns, left and right, left 200px and right 600px. Once created, it turns out that 800px width is not enough because we need padding and borders. Arg….. Forced to have to recalculate by considering how much padding and how many borders.

Box dimensions
Box dimensions

Wow, what a hassle, so what if we want to make the width or height of an html element such as a div have the width and height that we want? The solution can be to use the Box-Sizing feature in css3.

We’d better take a look at an example of using box-sizing

DEMO DOWNLOAD

Just add the box-sizing code: border-box; to create elements that are as wide as we want. To be able to run in various browsers use the prefix of each browser.