The CSS box model lies behind everything you do in CSS. Every element is defined by a rectangular box that encloses that element. Understanding how the box model works is a key to understanding CSS and having greater control over your layout and presentation. Let’s dive right in and talk about what the CSS box model is, how one box affects the boxes around it, and some common browser issues when displaying CSS boxes.

In nutshell, the box model in CSS describes the boxes which are being generated for HTML-elements. In this post below you’ll learn the tips and techniques exactly about CSS box model to achieve best out of CSS development.

You may be interested in the following related articles as well.

• How to Create A Better Online Portfolio
• Why is Social Interaction Important For a Website
• Reasons Why Readers Don’t Like Your Blog
• Tips to Reduce Server Load and Save Bandwidth
• How to Increase Web Traffic through Search Engines!
• 11 Tips to Reduce Server Load and Save Bandwidth

Feel free to join us and you are always welcome to share your thoughts that our readers may find helpful.

Don’t forget to subscribe to our RSS-feed and follow us on Twitter — for recent updates.

What is the CSS Box Model?

Every element in the document tree is defined by a rectangular box. The CSS box model describes those boxes and defines the properties each has. The easiest way to understand how the box model works is with a simple image.

Every element has a width and height associated with its content area. Each element then has an area of padding surrounding the content and a border containing the padding and content area. Finally each element has a margin outside of its border. Paddings, borders, and margins have values for their top, right, bottom, and left sides.

If you think of an element’s edge as being it’s border then padding controls space inside the element and margin controls space outside the element and between neighboring elements. Note that when considering the background property of any element that background extends to the elements border and doesn’t include the margin of the element.

Differences Between Block Boxes and Inline Boxes

If you’re familiar with the CSS display property, you know it has values for block, inline, and none. Block and inline are 2 different types of boxes. Both adhere to the box model with one key difference in the way each is laid out on the page.

Block level boxes are laid out vertically one after the other. If you have two block level boxes next to each other in your html, the second will sit below the first. Inline boxes on the other hand are laid out horizontally. An inline box will always sit to the right of the box that precedes it, assuming there’s enough room in the containing element.

Inline boxes will wrap though. They will start to the right of the previous box and fill whatever horizontal space is remaining. They will then wrap to the next line and again move to fill the horizontal space. A block level box would automatically drop to the next line before filling any space.

Block and inline cover two of the display properties. The third none says no block exists. If you assign the value of none to any CSS box, that box is completely removed from the normal document flow. Conversely if you set the CSS property visibility to hidden, the box is still there filling the space according to the CSS box model rules. You don’t see it, but it does hold the space.

Floats, Positioning, and the Normal Document Flow

The discussion above about block and inline boxes assumed each was in the normal document flow. Floated and positioned elements are still boxes, but they are removed from the normal document flow in different ways. Both also alter how other elements react to their box.

• Normal flow — In CSS 2.1, normal flow includes block formatting of block boxes, inline formatting of inline boxes, relative positioning of block or inline boxes, and positioning of run-in boxes.
• Floats — In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.
• Absolute Positioning — In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.
• Relative Positioning — In the relative positioning model, a box is shifted relative to its position in the normal document flow. Other elements are not affected and lay where they would had no positioning been applied.

Boxes will flow around a floated element, they will act as though absolutely positioned elements are not there, and they will treat relatively positioned elements as though no positioning was applied at all.

Calculating the Widths and Heights of Boxes

When you set a width or height in CSS you’re setting the width or height of the content area portion of a box only. The width and height of the containing block (box) is defined as follows:

Notice that the width and height of the block includes both the left and right or top and bottom margin and padding as well as the border width.

When one of these values is not specified browser defaults are used. One issue with cross browser development is that different browsers may use different default values for the properties defining a box. The reason to use CSS reset files is to ensure that all default values are the same across browsers.

Issues with IE6 and the Box Model

Older versions of Internet Explorer, including IE6 (without a proper doctype) have a box model bug and calculate the width property inaccurately.

Width should only refer to the width of the content area. Older versions of IE and IE6 in quirks mode calculate the width as being the width of the content area + left and right paddings + the width of the right and left borders

Similarly it includes paddings and borders when calculating the height property.

For the most part you shouldn’t have to deal with this issue any more as long as you use a proper doctype. Beware though that IE6 is still used and if you fail to specify a doctype then IE6 will revert to quirks mode and calculate widths and heights inaccurately as described in this section

Summary

The CSS box model is the foundation upon which the rest of CSS is based. Remember that every element in the document tree is defined by a rectangular box described by this box model. Boxes are of one of two types, block and inline, each with its own rules about where it lays and where elements that come after it lay.

When a box is set via display: none the space that box occupied collapses.

When a box is set via visibility: hidden the box is not seen, but it still holds its space.

Floats and positioned elements take boxes out of the normal document flow and affect where they sit and where the elements around them also sit.

Older versions of Internet Explorer inaccurately calculate the width of the visible content area of a box and consequently the box itself. It’s an issue you shouldn’t counter often, but one to still be aware of.

I hope this post has helped you to understand better how the box model works, but if you have any questions please ask.

Images Credits

• 102 by Me and the sysop
• Out of the norm by immrchris