CSS Box Model: The Foundation For Improving Your CSS

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.

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.

instantShift - CSS Box Model

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.

instantShift - CSS Box Model

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

instantShift - CSS Box Model

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:

width of containing block (box) = ‘margin-left’ + ‘border-left-width’ + ‘padding-left’ + ‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’
height of containing block (box) = ‘margin-top’ + ‘border-top-width’ + ‘padding-top’ + ‘height’ + ‘padding-bottom’ + ‘border-bottom-width’ + ‘margin-bottom’

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.

instantShift - CSS Box Model

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.

instantShift - CSS Box Model

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

Like the article? Share it.

LinkedIn Pinterest

101 Comments

  1. Brilliantly written article and lots of useful information. Thank you very much for pointing the details out.

    In my experience, I found the absolute positioning, when used/coded correctly, is the best way for cross-platform compatible layout development. There may be some semantically issues though, depending on your coding but it is not hard to fix.

    And also you pointed out the importance of using CSS resets. Really important indeed. I would be glad if someone points me to the direction where I can find the default padding and margin values per browser. Just curious.

  2. very useful

    thank you

  3. Thanks for sharing. Very useful information.

  4. Great information presented in a very easy to read and understand method. Well Done! … and Thanks!

  5. Wow powerful post thx alot of all the ideas and tips

  6. Thanks all. I’m glad you liked the post.

    @SEOmium – I generally think floats are a better approach to developing a layout cross browser. You can certainly layout a site with absolute positioning, but I find that positioning one element means positioning another element and another. Usually you only need to float one or two key parts of a layout to get it working.

    The cross browser issues are minimal and easy enough to deal with, especially if you use a css reset :)

  7. Useful overview, thanks!

  8. this is what we need to learn first.. when learning css based layout.

    Your article is superb, and I like to share it others.. Bookmarked.

    I like it verymuch.. thank you..

    Quick Link Now

  9. This article has been shared on favSHARE.net. Go and vote it!

  10. thanks you for your post

  11. very informative. thanks for sharing

  12. great information…thank you for share

  13. Brilliantly presented article. You have focused on a small yet critical part of UI. Thanks a ton!

  14. very informative..thanks for sharing

  15. Always interesting to go through articles of Instant shift. This particular article about CSS box model was quite helpful for me.

  16. Thanks a lot friend.

  17. Thanks a lot, still just learning css

  18. Ie6 is still used out there, thanks for your explanation about ie box model bugs

  19. Thanks very much for these tips. I just wonder if these CSS display properties will work the same way in all browsers (IE, Firefox, Safari, Netscape etc). This is the main concern nowadays because of the cross-browser compatibility.

  20. hi ,
    Thank you for sharing , i am web designer beginner i am finding a css menu based resources my friend told me you can try this reference’s so iam landing on your site but i am buried i have no found on your site any css based menu so could you update css menu regarding article .

  21. thanks

  22. Thank you for best article,
    best regards…

    [..URL..]

  23. Thanks and Regards

  24. Thanks for your beneficial article about the usage of CSS box model.It do helps me to improve my understanding about how to use it.

  25. Thank you so much for sharing this sweet stuff with the CSS Box Model. It was more helpful to us to improve our CSS sites. Keep up sharing good stuffs like this, Congrats.

  26. Hey,thanks for teh share, good content.

  27. Well somehow I got to read lots of articles on your blog. It’s amazing how interesting it is for me to visit you very often.

  28. Well somehow I got to read lots of articles on your blog. It’s amazing how interesting it is for me to visit you very often.

  29. This is beyond doubt a blog significant to follow. You’ve dig up a great deal to say about this topic, and so much awareness. I believe that you recognize how to construct people pay attention to what you have to pronounce, particularly with a concern that’s so vital. I am pleased to suggest this blog.

  30. I’ve decided to make it open source so that it’s freely available to anyone interested in learning how mouse gestures are implemented. I will be also be posting new releases regularly so that non-developers can benefit from mouse gestures.

  31. Lately I came to your website and have Been reading along. I thought I would leave my initial comment. Keep writing, cause your posts are impressive!

  32. Wham bam thank you, ma’am, my quseoitns are answered!

  33. I’m finally making a decision to buckle down and tackle CSS after a long break in active web design. Things have changed alot. This post was a great read and really simplified things. I’ll look for more info like this.

  34. I mean I just read through the entire article of yours and it was

    quite good but since I’m more of a visual learner,I found that to be

    more helpful well let me know how it turns out! I love what you guys

    are always up too. Such clever work and reporting! Keep up the great

    works guys I’ve added you guys to my blogroll. This is a great

    article thanks for sharing this informative information.

  35. The CSS Box Model is one of the first things you learn about when starting the road to becoming a master of CSS or should be anyway.

  36. The css box is one of the best,

Leave a Comment Yourself

Your email address will not be published. Required fields are marked *