The Hickensian

20.05.04 3D CSS Box Model

56 comments
Tagged with: boxmodel, css, webstandards

Please Note : This has now been updated and moved to its own section here.

Here’s a thing. I’ve seen umpteen diagrams showing CSS beginners how padding, border and margin work together, but not the order in which elements such as background colour and image are stacked. To try and fill this hole, I’ve drawn a diagram. I’m not sure if this is of any use at all, but here it is anyway – the 3D CSS Box Model.

(Updated: 21.5.04): Added keylines to show ‘fitting’ and changed the background image to be more obvious. Others have now done their own versions, Tom has created a black & white printer friendly version and Douglas has created an interactive version – great work chaps.

The 3D CSS Box Model

There is now a French translation available here.

Comments | RSS

No.1

∞ Jeff Clark said 2092 days ago:

I wish this would have been around when I was first learning CSS - that would have definately made those first few days a lot less stressful!

Jon-What happened to your preview? It quit working! (IE6PC)

No.2

∞ Zelnox said 2092 days ago:

At least it looks cool. ^_^

No.3

∞ Shaun Inman said 2091 days ago:

One thing I've noticed can be slightly inconsistent is border placement relative to background image. I seem to recall the border being inside the background image box in some browsers (IE 5.x PC maybe?) and then outside in others.

Where does the border fall in your illustration Jon? :D

(Preview also isn't working in Safari 1.2.1)

No.4

∞ Jon Hicks said 2091 days ago:

Wierd - still OK in Firefox and Omniweb. Can't see why its suddenly stopped working. There goes the evening!

Shaun - I've never seen that border thing happen before. I don't suppose you have any examples do you?

No.5

∞ Jason said 2091 days ago:

Wow. I'm going to print this out and hang it on the wall above my desk. I always struggle to remember how these things correlate. It's amazing how something so simple could be so incredibly useful.

BTW, Safari 1.2.1 here and Preview is working just fine.

No.6

∞ Sumaira said 2091 days ago:

Nice! Im printing this and hanging in on my cube's wall at work.

No.7

∞ Nathan said 2091 days ago:

Superb! Do you mind if I use this in my tutorials (with proper attribution, of course)?

No.8

∞ Shaun Inman said 2091 days ago:

Actually, after a quick test it appears that it's IE 5 Mac that places the background behind the border.

Here's the test.

(Preview is working again in Saf 1.2.1)

No.9

∞ Aleksandar said 2091 days ago:

Good thing.

You should've used much more contrast, as it's barely visible when printed in B&W.

No.10

∞ Pete Fairhurst said 2091 days ago:

I'm almost certain you're correct Shaun, regarding that particular version of IE/Win.

If I remember rightly, you can sort this particular IE/Win 5.x oddity — along with numerous others — using a combination of Tantek Celik's different CSS 'pass' filters.

No.11

∞ Shaun Inman said 2091 days ago:

Actually, in my test environment all versions of IE PC are innocent. The guilty party is IE Mac. I've updated my sample page with a simple fix.

No.12

∞ Josh Williams said 2091 days ago:

Zeldman at some point during one of his last redesigns of The Daily Report diagrammed which browsers lay the background image below the border, and which place in within the border.

It seems I remember IE/Mac being inconsistent with most other browsers. If you hunt around, I'm sure you can find his write-up on the subject.

No.13

∞ Colly said 2091 days ago:

I think one of the biggest stumbling blocks for anyone learning CSS (or any language) is how the starkness of a page of code correlates to a visual design. It's refreshing to look at an example from this diagrammatical perspective, and it's a method that reference sites could adopt for all manner of elements (perhaps a floats/containers model for example). Top stuff...

No.14

∞ jazer said 2091 days ago:

Very nice, but it's hard to tell how the pieces fit together two dimensionally. For example, is the border outside or inside the margin?

(I already know this, but some may not be able to see that from this diagram)

No.15

∞ Pintu Sharma said 2091 days ago:

Clean and Informative Image, Looking Good In MyIE, Awaiting another images for CSS

No.16

∞ Richard Leggett said 2091 days ago:

Quality article, also can I just mention the quality of this site as I type and see the preview appearing below, and was impressed very much by the superb horizontal collapsing as I resized my browser window. :D

No.17

∞ Jon Hicks said 2091 days ago:

You chaps are right - it could do with more contrast to make it obvious that how they fit together. I was tempted to add dotted lines to show where everything connects, but this just adds confusion. Its bad enough colouring the margin and padding.

Nathan - no problem. I intend to post an eps version that folks can use.

What this isn't intending to show is how some browsers get this wrong. The point is that background image never appears on top of the border.

I'll revise and post an eps soon.

BTW: anybody else annoyed by the small size of the comment field?

No.18

∞ Hans said 2091 days ago:

Since I am able to remember these kind of things pretty well, I don't really need it. However, I will print it and place it on my wall simply because it looks awesome!

No.19

∞ Conor said 2091 days ago:

Man Jon you have done it again. Everything you do just seems to amaze me. I would have loved to have this when I was first learning CSS

No.20

∞ Scott Johnson said 2091 days ago:

A little late getting here. I somehow missed this when you posted it and found it on another site today. Very nice diagram, Jon. While I am quite familiar with how these things work already, it seems like it would be a great learning aid for those who are not.

No.21

∞ Peter Zignego said 2091 days ago:

A nice refrence:)

No.22

∞ Matt Warnock said 2091 days ago:

This what I was needing for this problem that stumped me last night. Thanks, its going under the xgames poster.

No.23

∞ Josh Bryant said 2091 days ago:

Jon- Thank you so much for this. I think I am going to just save it to my hard disk this time. I am getting a little tired of doing a google image search for 'box model' every-time I want to explain it to someone. The 3D adds so much.l

BTW, I am not annoyed at the comment box because I type everything in text edit and then copy/paste when using comment and forum boards. Just makes things easier for me.

No.24

∞ Bruce Collier said 2091 days ago:

Great diagram! Before everyone rushes out and prints it out, you might want to fix the spelling of "hierarchy".

Maybe some faint horizontal lines to show the position of the elements inside the margins would also help to illustrate how margins go *outside* the box.

No.25

∞ Jon Hicks said 2091 days ago:

Ack!!! Damn spelling!! Thanks, I'll change that...

No.26

∞ Saj said 2091 days ago:

Wow, thanks very much for that. I've been puzzling over this whilst making my new website. I'm leaning on making the website work properly with Firefox, and there are discrepancies between the browsers and how they render border etc from CSS.

Love the site design BTW :-)

No.27

∞ Adam Taylor said 2091 days ago:

Lovely... but you know what would be even better? A 3D version you could *rotate*, so that the alignment of borders, etc, is obvious...

I should probably shut up now.

No.28

∞ Douglas said 2091 days ago:

Nice pic!

To solve the 3d to 2d problem, you should make it interactive. Say a bit of 3D flash.

You start with a view like your current one, then you drag a bar or something ro the right, and the whole thing rotates so it faces you as in real life. Drag back and it looks 3D again!

Douglas

No.29

∞ Aaron said 2091 days ago:

Looks lovely IMHO, and very handy too - like others, it's gonna get printed out and stuck to a bit of free wall (if I can find any!) :)

No.30

∞ Ryan Kelly said 2091 days ago:

Could you post a 'front on' view of this pic, its still slightly confusing.

No.31

∞ Tom Dell'Aringa said 2091 days ago:

For those who wanted a black and white version, I've taken the liberty of creating one that prints out a little better. I had trouble printing this out myself too. It's at a slightly different angle, and I added some dotted lines to show where the stacking is.

Really great idea Jon!

See my alternate version at:

http://www.pixelmech.com/index.php?id=P74

Tom

No.32

∞ Douglas said 2090 days ago:

I missed the comment above my last one, so repeated the same idea, but to make up for it, I have actually made the thing and put it online:

http://www.redmelon.net/tstme/box_model/

Comments welcome

Douglas

No.33

∞ Shaun Inman said 2090 days ago:

Nice work, Douglas. Only problem I see is that the background image and color end up behind the border in your demo but in all browsers but IE 5 Mac the border goes around the outside of the background.

Here's a more obvious example of the difference based on my comments yesterday.

No.34

∞ Douglas said 2090 days ago:

I'm with you on the background-image, and I've also changed the padding box. But, background-color does extend under the border (atleast in Opera, IE6 and FF). Try setting the border style to dashed, and border width to 5px or something. Then add a no-repeat background image, and you'll see the effect.

Douglas

No.35

∞ Shaun Inman said 2090 days ago:

I stand corrected. Good call.

This doesn't really matter now but I mixed up the link in my last comment. It should have landed you here.

No.36

∞ Tom Dell'Aringa said 2090 days ago:

Along the background/dashed border issue, I had some sticky problems with that exact thing on a recent project. I can't remember the specifics just now (maybe someone knows) but some browsers allow the background color to bleed under the border, as you said.

However, some don't. When you are designing and expecting to have that effect across the board (a contrasting dashed line) things can get tricky. I believe I used the containing box's background in the end, but I'm not sure.

Tom

No.37

∞ Douglas said 2090 days ago:

Tom: I practically don't use borders anyway, so a non issue :)

The thing is, when I saw Shaun's post, I thought that he was correct (border outside the bg colour) and was about to do as he said; untill I did a quick test and it seemed to work as I described above. Perhaps it is a quirks/standards mode thing?

Douglas

No.38

∞ Tom Dell'Aringa said 2090 days ago:

Douglas, I found the post I wrote on it with a test page. I also had problems with the border when a width was set. You can see the info at:

http://www.pixelmech.com/index.php?id=P54

The problem I was having was IE places the background color UP TO the border. Gecko allows the background color to bleed UNDER the border. So depending on what you are trying to do, it can cause you issues.

Hopefully we're not off topic here, this does relate to how the box stacks and where everything lands :)

Tom

No.39

∞ Douglas said 2090 days ago:

For sure, and I've added a link to the page you linked above too.

No.40

∞ Jon Hicks said 2090 days ago:

Well done chaps - there's good work being done here.

Douglas - I was pondering your suggestion over dinner, thinking "Great idea, where will I find the time to do that?..", then the other Douglas just went and did it. Really well done - I think that makes it really clear how all the elements fit together.

I've updated my own image, as much to correct my embarrassing spelling ;o)

Now then - the border issue. This isn't off-topic at all, and as good a time as any to discuss it. The points for me are as follows:

The background-image never appears in front of the border, so I think the stack order should show border on top.

My feeling is that Moz & Opera get it right and IE Mac gets it wrong.

We could spend ages, coming up with variations on the diagram, showing how each browser gets the box model wrong, and that could be worthwhile. However, this diagram is intended for people starting to use CSS, and I don't want to overcomplicate the issue.

Thinking out loud - maybe it would be worth trying to illustrate browser differences with these sorts of diagrams? On other hand, life is too short, and summers almost here... :o)

Is there anything else we can do to make this clearer and more useful for beginners?

No.41

∞ Jordi said 2090 days ago:

Great work! It's very easy to understand the 3d css box model with this diagram.

No.42

∞ Hans said 2088 days ago:

Pooey. Now it doesn't look as good. At least the spelling's right this time.
;)

No.43

∞ David Barrett said 2088 days ago:

Great work Jon, Tom and Douglas. That's a pretty clear guide.

The border issue you mention is even more annoying than that.

I was trying to come up with a technique to decorate the basic box a bit better. I came up with one, used for the sidebar in my site, that works by using negative margins to stretch the first element in that sidebar div. This h3 is stretched over the border of the containing div, and a tiny background image applied to add rounded corners to the top (while using a plain CSS border for the rest of the box).

This works fine in Firefox, but not in IE. The containing box seems to crop the h3 from within the borders, while Firefox allows that h3 to overlap the borders. This happens even if I explicitly set the z-index of the h3. That's why the CSS selector used to select the h3 is one unsupported by IE ;)

I have a horrible suspicion that either IE has gotten this right (and I'm screwing up), or this is a scenario that is not covered in the specs. I'll have to trawl through them later in the week to see.

Am I missing something stupid, like z-index not working for floated elements or something? Bear in mind that, for me, it's nearly three in the morning.

No.44

∞ Shaun Inman said 2088 days ago:

Dave, have you tried setting the containing element's overflow to visible? This might fix the problem in IE 6 and 5.5--5.0 has its own problems relating to overflow though.

No.45

∞ David Barrett said 2088 days ago:

No, I haven't tried that. I'll give it a go later on today. Thanks Shaun.

No.46

∞ Tom Dell'Aringa said 2088 days ago:

When I get sometime, I'll try and illustrate the border issue that I came up with and submit it for comments.

Tom

No.47

∞ Andrea said 2088 days ago:

Great, now post this to IE and Mozilla developers, perhaps they are still a bit confused :-)

No.48

∞ Chriztian Steinmeier said 2087 days ago:

Great - always a sucker for stuff like this. I built my own "CSS Boxmodel Exploratorium" once, to help me understand this:

http://greystate.dk/resources/css-boxmodel/

No.49

∞ Jon Hicks said 2087 days ago:

Chriztian, thats farking brilliant! Thats such a cool way of learning the box model. In the css code at the bottom. there is an extra semicolon:



#demobox {

	border-style: solid;

	border-width: 1px;

	border-color: #000;

	padding: 0px;

	margin: 10px;

	background-color: rgb(102, 0, 153);

	width: auto;

	height: auto;

	;

}

Just in case you've missed it!

No.50

∞ Chriztian Steinmeier said 2087 days ago:

I knew I shouldn't have posted that link - now I have to go finish all the stuff that's in there that I just never got around to :-)

And thank you - I've used it like - a lot!

/CS

No.51

∞ Richard@Home said 2087 days ago:

Not entirely relevant, but your diagram was the inspiration for this.

No.52

∞ Ian Turner said 2086 days ago:

I am very impressed - nice piece of perspective work. I have sent it to all our developers a reference.

No.53

∞ sheldonschwartz said 2086 days ago:

I just set this as my desktop background!

No.54

∞ Martin said 2086 days ago:

Looks good. Could you please add something that indicates what the browser considers the "width" and "height" properties to be.

No.55

∞ jjjune said 2085 days ago:

great !!!

No.56

∞ Dennis Scanland said 2080 days ago:

This is a great way to illustrate the table elements. When you are just starting out it is hardest to wrap your head around the difference between padding and margins. Good work.