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.
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
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
Like it? Share it.
Pingback: Tweets that mention CSS Box Model: The Foundation For Improving Your CSS | CSS | instantShift -- Topsy.com
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.
Wow powerful post thx alot of all the ideas and tips
very useful
thank you
Pingback: Tweets that mention CSS Box Model: The Foundation For Improving Your CSS | CSS | instantShift -- Topsy.com
Pingback: CSS Box Model: The Foundation For Improving Your CSS | TopRoundups
Pingback: CSS Box Model: The Foundation For Improving Your CSS | CSS … | Kerja Keras Adalah Energi Kita
Pingback: CSS Box Model: The Foundation For Improving Your CSS | CSS | instantShift « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit
Pingback: Tweets that mention CSS Box Model: The Foundation For Improving Your CSS | CSS | instantShift -- Topsy.com
Pingback: CSS Brigit | CSS Box Model: The Foundation For Improving Your CSS
Thanks for sharing. Very useful information.
Pingback: links for 2009-11-16 | Aram on Mason
Great information presented in a very easy to read and understand method. Well Done! … and Thanks!
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
Pingback: links for 2009-11-16 | AndySowards.com :: Professional Web Design, Development, Programming Freelancer, Hacks, Downloads, Math and being a Web 2.0 Hipster?
Pingback: WPUK » Blog Archive » CSS Box Model: The Foundation For Improving Your CSS | CSS …
Useful overview, thanks!
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
Pingback: CSS Box Model: The Foundation for CSS based layouts | Canada Web Solutions | Quick Link Now
Pingback: Tech Blog — John Keyes – Linkeyes 17th November 2009
Pingback: links for 2009-11-17 « random thoughts and casual ruminations
Pingback: Darklg Web (darklgweb) 's status on Tuesday, 17-Nov-09 12:13:10 UTC - Identi.ca
Pingback: CSS Box Model: The Foundation For Improving Your CSS | favSHARE.net
This article has been shared on favSHARE.net. Go and vote it!
That should be really helpful, in the near future. Great post that is exactly what I was looking for.
Pingback: CSS Box Model: The Foundation For Improving Your CSS | Design Newz
Pingback: Inspiration from the Net #4 « HU Design
thanks you for your post
very informative. thanks for sharing
Pingback: video | ClickLogin Web Design
Pingback: Useful Resources for CSS and HTML | Programming Blog
Pingback: Silver plated Rise and Fall financial or money market cufflinks with presentation box. Made in the U.S.A | Superstar Book Deals
Pingback: links for 2009-11-19 « toonz
Pingback: CSS Box Model: The Foundation For Improving Your CSS » Expression Web Tips
Pingback: fritz freiheit.com blog » Link dump
Pingback: Enlaces semanales que no he publicado (39) | Cosas sencillas
Pingback: Information Technology for Management: Improving Performance in the Digital Economy | Cheap Technology Buys
Pingback: Master CSS across browsers « luvx3.org
great information…thank you for share
Pingback: How Well Do You Understand CSS Positioning? | Van SEO Design
Pingback: How Well Do You Understand CSS Positioning? | Programming Blog
Pingback: Online Business Management Software and Services » Blog Archive » How Well Do You Understand CSS Positioning?
Brilliantly presented article. You have focused on a small yet critical part of UI. Thanks a ton!
Pingback: This Weeks Twitter Design News Roundup N.12 : Speckyboy Design Magazine
Pingback: This Weeks Twitter Design News Roundup N.12 | Programming Blog
Pingback: Great CSS Resources and Articles for Students | Resources for Web Development Students @ Robin's Blog
Pingback: This Weeks Twitter Design News Roundup N.12 | Download E-Books Free Video Training Courses Softwares
Pingback: Useful Resources for CSS and HTML | Master Design
Pingback: 精品阅读（13）20091127 -- 寂寞如哥
Pingback: Brad Pitt's Gifts to New Orleans – New York Times | Brad Pitt Celebrity Monitor
Pingback: Top Articles On The Web Design Billboard In November’09 | Programming Blog
Pingback: Top Articles On The Web Design Billboard In November’09 | meshdairy
Pingback: This Weeks Twitter Design News Roundup N.12 | Master Design
Pingback: 60+ Ultimate Resources Especially For Designers To Discover The Best Of The Web In November @ SmashingApps
Pingback: 60+ Ultimate Resources Especially For Designers To Discover The Best Of The Web In November : BeginnerPC
Pingback: Wordpress Blog Services - 60+ Ultimate Resources Especially For Designers To Discover The Best Of The Web In November
Pingback: What Are Some Reasons For Society To Accept And Reject Gay Couples? | bloomington hotel
Pingback: OmniDownloads | 60+ Ultimate Resources Especially For Designers To Discover The Best Of The Web In November
Pingback: FreeDownloadSecrets.com » Blog Archive » 60+ Ultimate Resources Especially For Designers To Discover The Best Of The Web In November
very informative..thanks for sharing
Pingback: Improving the Management of Output in an Sap Environment | Cheap Technology Buys
Always interesting to go through articles of Instant shift. This particular article about CSS box model was quite helpful for me.
Pingback: 60 Amazing Resources for Designers :: Reflex Stock Photo Blog
Pingback: Lär dig CSS | Webbdesign
Pingback: 60+ Ultimate Resources Especially For Designers To Discover The Best Of The Web In November | meshdairy
Pingback: 60+ Ultimate Resources Especially For Designers To Discover The Best Of The Web In November | The Apple Tech Blog
Pingback: Required Reading – 12/15/09 « I want my dream SEO job!
Pingback: 4 Most Useful Resources for CSS and HTML for Web Designers Web Design Blog
Thanks a lot friend.
Ie6 is still used out there, thanks for your explanation about ie box model bugs
Thanks a lot, still just learning css
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.
Pingback: TG Developer » 47 CSS Tips & Tricks To Take Your Site To The Next Level
Pingback: 47 CSS Tips & Tricks To Take Your Site To The Next Level - Programming Blog
Pingback: The Meaning Of Shapes: Developing Visual Grammar | Van SEO Design
Pingback: The Meaning Of Shapes: Developing Visual Grammar - Programming Blog
Pingback: Useful Resources for CSS and HTML | Design Reviver
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 .
Pingback: Part 1: How to Turn a Design Image Into a Working Web Page « gabriel catalano | in-perfección
thanks
Thank you for best article,
best regards…
[..URL..]
Thanks and Regards
css after i learnd this css i started taking projects from local business owners about website designing , before that i was like i dont want to work on website designing and all.CSS Rocks.
Pingback: Other Sites Where I’ve Posted Recently | Van SEO Design
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.
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.
Wonderful posts you have on your blog and I have bookmarked you and will visit yours often.
I will be sharing this info on my facebook page with my friend and relatives. Thanks.
Acai Diet News
Hey,thanks for teh share, good content.
Pingback: 2 Column CSS Layout: Fixed Width And Centered | Van SEO Design
Pingback: 47 CSS Tips & Tricks To Take Your Site To The Next Level
Another great post, I appreciate all the work you put into this site, helping out others with your fun and creative works.
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.
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.
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.
Pingback: Rearranging Boxes: Why You Should Structure Your HTML To Be Flexible | Van SEO Design
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.
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!
Wham bam thank you, ma’am, my quseoitns are answered!
Pingback: An Attempted Solution To A Real Responsive Layout Problem | Van SEO Design
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.
Pingback: The CSS Display Property: A Reintroduction To A Familar Friend | Van SEO Design
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.
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.