CSS box model --- it's all about boxes

Document directory

• Widths
• Microsoft get it wrong
• Heights
• The element background
• Background reading

It's all aboutb o x e s jessey.net | Simon | articles | previous article | next article

In Cascading Style Sheets,Box ModelIs everything. The primary purpose of CSSIsVisual Presentation(Although styling for non-visual presentation is wrongly ded) and the box model is the primary mechanic of layout. Also of great importance areInline layout modelAnd the special mechanisms that exist to handle positioning and floating of elements. The serious designerMustHave a firm grasp of how the box model works and familiarity with it will allow the author to understand all the various properties will interact with each other when applied.

The CSSBox Model

The dimo-abve demonstrates the CSSFormatting model in general, but the box model in particle. Every CSSElement forms a "box" composed of these components:

• Content-The actual content of the element such as text or an image. When using the CSS widthProperty, you are actually defining the width of this content.
• Padding-This is set around the content when you definepadding-top,padding-right,padding-bottom,padding-leftAndpaddingProperties, the latter of which is the shorthand property.
• Border-This is set around the content and padding when you defineborder-top,border-right,border-bottom,border-leftAndborderProperties, the latter of which is the shorthand property.
• Margin-This is set around the combined content, padding and border when you definemargin-top,margin-right,margin-bottom,margin-leftAndmarginProperties, the latter of which is the shorthand property.

Widths

It is important to understand how box model widths are calculated. Use the following equation to determine the width of the containing block:

width=margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right

Microsoft get it wrong

Internet Explorer 5.x makes a complete pigs ear of this equation. it calculates the width of the content as the sum of the content and its padding and borders. if you want a box that is 100 pixels wide, with 10 pixels of padding and 10 pixels of border, you wowould normally set a style rule like this:

width: 100px; padding: 10px; border: 10px

To achieve the same effect in Internet Explorer 5.x, you wowould alter the style rule like this, or you wowould end up with a box that is 40 pixels narrower than it shoshould be:

width: 140px; padding: 10px; border: 10px

In Internet Explorer 6.0, Microsoft have corrected this problem,OnlyIf you specify a correctDOCTYPEDeclaration in your code, otherwise it reverts to the fucked-up version.

Heights

It is equally important to understand the difference between how widths are calculated and how heights are calculated. vertically-adjacent margins of elements in normal document flow areCollapsed. That means that the distance between two vertical margins that are adjacent to each other is the highest of the two values. If a block with the style rulemargin-top: 1emIs placed below another block with a style rulemargin-bottom: 3emThan the distance between the two will be 3em, rather than 4em. There are two exceptions to this rule. vertically-adjacent margins of positioned or floated elements are not collapsed.

The element background

If you apply a background (a color, an image or a combination of the two) to an element, that background extends all the way to the outer edge of the border around the element. the Element and Its padding are filled and the background will also be visible through the border if it has been givenborder-styleWith gaps in it, suchdottedOrdouble.

Below is an example. The paragraph has 1em of padding and a white, dotted border that is 5 pixels in width.

This example is of some text

It shoshould be noted that expose browsers fail to display this example correctly. Internet Explorer makes a good stab at it, but Mozilla and opera fail to extend the background image underneath the border.

Background reading

More on the CSSBox model can be found at the website of the World Wide Web Consortium, in particle, in the specification of the box model. Also at the W3CIs the css2Revision that corrects and updates the CSSLevel 2 Specification. also of note is the latest version of the Box Model module that is intended for Cascading Style Sheets Level 3. the specification between des between new features to wet the appetite. tantek elik of Microsoft has come up with a hack that takes advantage of yet another bug to fix the problem it has calculating widths. thank you for reading.

|

Simon Jesus, 2002