The Big Box – Understanding Sizing In CSS Layout

What is Box-sizing? This is defined as a CSS property that enables functioning of CSS layouts intuitively. In case, you have been working with CSS for a specific period of time, use of properties such as border, width, and padding, can be confusing. Use of width property in box sizing will ensure results precisely as you had expected. Proper box-sizing refers to a commitment wherein 200px really means a rendered width of 200px. No JavaScript magic is involved.

Understanding the Box Model

CSS box model runs the width and height of an element on any webpage. Although nuances of this kind of model are quite complicated, it will suffice to understand the manner in which the calculations of rendered widths and heights are done. It takes a combination of many CSS properties to form the actual rendered width and height on a specific web page.

Image result for CSS

Example

  1. padding + border + height = actual rendered height
  2. padding + border + width = actual rendered width

It is crucial to understand that the actual rendered width of a specific element comprises of the following properties:

– Border

– Padding

– Width

In absence of box-sizing, the width property will represent an element’s content area. In this case, the actual rendered width will include border, content area, and padding.

This also means that setting a width of 200px or a relative width of 2 per cent will restrict the element to that specific exact size especially if it has no border or padding. On the other hand, presence of padding or border (or both) will get a larger actual rendered size. Say differently, the width property actually just signifies width of the content area. It is not the total width of the element.

Consequently, calculating a desired width on the page will involve subtracting border and padding from the width property.

For instance, when you set a width of 200px and aim at 20px of padding on both sides, you require borrowing 40px total (20px for the right and 20px for the left) from the width. This is also applicable for the border property. It leads to reduced readability of code as the code might read as the following despite the rendered element being 200px across:

.sidebar {

 width: 158px;

 padding: 20px;

 border: 1px solid #DDD;

}

Now this is not intuitive for the width property (158px) especially when actual rendered width is calculated as 200px. Luckily, a better technique can fetch the same result.

* { box-sizing: border-box; }

So instead of calculating width via including border and padding, the width property is used by box-sizing property combined with the border-box value as the actual rendered width. So, the previous code may also be modified to appear something similar to the following:

.sidebar {

 box-sizing: border-box;

 width: 200px;

 padding: 20px;

 border: 1px solid #DDD;

No border or padding applied will be added to the rendered width. As an alternative, it will automatically subtract from the space available within the content area. It leads to a more readable code.

The width property will be similar to the actual rendered width of the element. The credit goes to box-sizing enabled. Based on remaining with, the content area gets automatically sized once the padding and border gets subtracted.

Most reputable web designers and developers recommend the use of box-sizing: border-box across all page elements. This ensures a natural and intuitive approach to layout. The following code is recommended by experts:

*, *:before, *:after {

 -moz-box-sizing: border-box;

 -webkit-box-sizing: border-box;

 box-sizing: border-box;

The concept of box-sizing property is not new. However, only in the last few years it has emerge as a viable technique. The credit goes browser support from Internet Explorer. Also the code will work till IE8. If you have any question for CSS, so visit here for answer: jiteshmanaktala.com

Box-Sizing Resources

Box sizing is already integrated in to popular front-end frameworks such as Bootstrap and Foundation. By default, the two frameworks conveniently apply the border-box value to anything that makes their respective grid systems easier to understand.