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.

CSS Box Model: The Foundation For Improving Your CSS

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.

Like it? Share it.

100 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. Wow powerful post thx alot of all the ideas and tips

  3. very useful

    thank you

  4. Thanks for sharing. Very useful information.

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

  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. Ie6 is still used out there, thanks for your explanation about ie box model bugs

  18. Thanks a lot, still just learning css

  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.

Leave a Comment Yourself

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>