4 replies [Last post]
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 8 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

The box model as specified by the W3C add margin, borders and padding to the width or height values of an element.
The idea behind this model was to allow content width to be explicitly set and kept separate from padding, border and margin.
Instead of thinking of a traditional cardboard box with a set width, that contains padding, it may help to think of the content, of a fixed size first, then add padding the box (border) and margin outside.
For example

.box{ width:100px;    
	margin:10px;    
	padding:5px;    
	border:1px;    
}

The Standards Box Model
For this example Content is the area available to text etc.
Content= 100px.      
border, padding, margin= 32px.    
Total box size = 132px.    
132px = Left(margin 10px + border 1px + padding 5px) + Content(width 100px) + right(padding 5px + border 1px + margin 10px).

Now that would be all well and good if all browsers implemented it as specified, unfortunately that's not the case.

The Non Standards ( Quirky ) Box Model
Many non-standard compliant browsers set the total box width and shrink the content area by the size of the margin, padding and borders.
Using the same CSS as above.
Content= 68px.    
border, padding, margin= 32px.    
Total box size = 100px.    
100px = Left(margin 10px + border 1px + padding 5px) + Content 68px ( width 100px - 32px(Left + Right)) + right(padding 5px + border 1px + margin 10px).


Mode Switching
Now to complicate things a little more some of the browsers that get it wrong can be helped by doctype switching. Putting the browser into Standards Mode tells it to use the Standards Box Model
http://gutfeldt.ch/matthias/articles/doctypeswitch.html
http://www.hut.fi/~hsivonen/doctype.html

Hacks
There have been many hacks developed to fix the non-standard compliant browsers that don't switch between Standards and Quirks mode. Hacks have been a popular method of controlling the differences in the box models.
http://www.tantek.com/CSS/Examples/boxmodelhack.html
Most websites should have no reason to need hacks and if you can get away without using them your site will be easier to maintain.

Extra Containment
Alternatives to hacks include not specifying margin, padding or borders on the element with width set.
<div style="width:100px;">    
	<div style="margin:10px; border:solid 1px red; padding:5px;"> Displays the same in most browsers, total width 100px</div>    
</div>

Design Philosophy
Design your sites to look as good as possible for the browsers of your target market, without the need to be exactly the same. Your designs don't need to look exactly the same in every combination of browser and OS.
Most web surfers only use one browser, so have nothing to compare the design with. Try to use fluid, flexible designs that don't require pixel perfection.
http://www.alistapart.com/articles/dao/

The Future
In CSS3 there is the Box-Sizing property which will eventually be supported by newer browsers.
Currently Box-Sizing is only supported by newer versions of Opera.
It wont help us with the current crop of browsers but one day you may be able to decide how the browsers calculate the box dimensions.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 40 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Box Model problems with width and height

Good piece Tony,
I wonder whether an explanation of the reasoning behind the padding /margining being added to the box rather than within it would help some come to terms with the idea as many like myself logically expect padding to be something that resides within a box rather than outside and it's not until you realise that it was separated so that the properties could be kept individually targetable rather than the situation otherwise that would have meant one property i.e width controlling several others; which did help me to understand and to stop ranting about the W3C Smile

love to see some padding out and extra emphasis placed on the concept of avoiding hacks altogether .
Just some mussings Smile

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 8 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Box Model problems with width and height

Thanks Hugo,
I will flesh it out a little and try and promote the no hack idea a little better.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 2 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Box Model problems with width and height

Tony wrote:
Thanks Hugo,
I will flesh it out a little and try and promote the no hack idea a little better.
That would be a Good Thing. I'm becoming convinced that a little plasticity in design and a standards forcing doctype obviates the need for a box model hack.

The only things I've fought recently are IE's faulty float model and its really weird 'has layout' related bugs. The former is dealt with by awareness of the problem and some little work-arounds. The latter is a royal PITA. Fixing it isn't the problem, there's four of five similar hacks that'll generally do the job. Finding the trigger and the source element is the hard part.

The next killer app ^H^H^H hack is the one that fixes IE's expanding box bug. While IE containers fail to honor sizing, any hope of some really imaginative layouts dies aborning (not to mention the plain layouts that break when a little excess content shows up). *Sigh*

cheers,

gary

Tony: Completely OT, thanks for the great float clearing hack. I use the version Big John modified. The real benefit is not the lessened markup, but rather the ease of handling float clearing so automagically. --gt

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 2 days 8 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5342
Points: 2963

Box Model problems with width and height

Thanks kk5st,
I hadn't read the changes to the article on positioniseverything
It's good they discovered a method to fix IE mac without javascript.
Now I have another article to update.