CSS

BOX MODEL

What is the box model?

The CSS box model describes the rectangular boxes that are created for every element in the document tree.

The box model components

Source: Kindly provided by Hicks Design under Creative Commons License: http://www.hicksdesign.co.uk/boxmodel/

Margin Can be applied to the outside of elements. Margins create space between the edge of an element and any adjacent elements.
p { margin: 5px; }

Background-color Sets the background color of an element.

p { background-color: #eee; }

Background-image Applies a background image to an element. Appears will on top of any background-color.

p { background-image: url(a.gif); }

Border Specifies the width, color and style of a border that is then added to the outside of an HTML element.
p { border: 5px solid red; }

Padding Can be applied to the outside of the content area of an element. Creates space between the edge of the element and its content.
p { padding: 5px; }

Content area Can be given width, height and overflow - depending on the type of box model.

p { width: 500px; }

Overflow Determines what happens when an elements content is larger than the content box.

p { overflow: hidden; }

Box model size options

There are three different ways that width and height can be applied to boxes.

Sized A box is sized when it is given an explicit width or height (eg. pixels or ems)

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. Sized (eg. width: 200px)

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

Sized (eg. height: 200px)

Stretched A box is stretched when it stretches to the full width or height of the parent container or the viewport.

Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tatio. Stretched (eg. width: 100%)

Collapsed Collapsed means the width or height shrinks around the content. A box can collapse when width or height are set to auto, or in some cases left undefined.

Lorem ipsum dolor sitc amunt Collapsed (eg. width: auto)

Lorem ipsum dolor sitc amunt

Collapsed (eg. height: auto)

Multiple box models

Many people assume that there is only one box model, and it is used for all HTML elements.

This is not the case! There are actually seven different box models - each with different characteristics.

The seven different box models:

1 2 3 4 5 6 7 block box model inline box model inline-block box model table box model table cell box model absolute box model float box model

1. Block box model

Block box appearance: Block boxes form visually a blocks, they flow down the page in normal flow.

Block boxes

This is a heading
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Dolor sit amet consect etuer adipi scing elit sed diam nonu nibh euismod tinunt ut laoreet dolore magna aliquam erat magna aliquam.

Block box width: By default, block boxes stretch to the width of their containing block or the width of the viewport. Their width can be sized but cannot collapse.

Stretched Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Ut wisi enim ad minim veniam, quis nostrud exerci tatio. Sized Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.

Block box height: By default, block box heights collapse. Their height can be sized but not stretched.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum eu feugiat nulla facilisis vel illum dolore eu feugiat. Duis autem vel eum iriure dolor in hendrerit in.

Collapsed

Sized

Block box margin: Affects all sides of the box. Margin-collapse occurs when in contact with block level elements above or below.
p { margin: 0 0 1.5em; }

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum eu feugiat nulla facilisis vel. Margin collapse Vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla.

Block box padding: Can be applied to all sides. Padding is added to the overall width/height of the box.
p { padding: 5px; }

padding

10px

content = 200px

10px

Total width = 220px

Block box border: Can be applied to all sides. Border width is added to the overall width/height of the box.
p { border: 5px solid red; }

border

5px

content = 200px

5px

Total width = 210px

Block box overflow: Overflow can be applied to block boxes.The default is overflow value is visible.
div { overflow: hidden; }

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum eu feugiat nulla facilisis vel illum dolore eu feugiat.

Vertical overflow

Horizontal overflow

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum eu feugiat nulla facilisis vel illum dolore eu feugiat.

overflow: visible

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum eu feugiat nulla facilisis vel illum dolore eu feugiat.

overflow: hidden;

overflow: scroll (adds scrollbars to top and side)

overflow: auto (adds scrollbars to affected axis)

Block box model: Block boxes use an additive model. Padding and border are added to overall width/height.

border padding 5px 10px content = 200px 10px 5px

Total width = 230px

Note: Older versions of Internet Explorer and boxes

Win/IE5 uses a different method to set widths and heights for boxes. If padding and border are applied to an element, their measurements are subtracted from the overall width.

border padding 5px 10px content set to 200px but will be 170px in IE5 10px 5px

Total width = 200px

2. Inline box model

Inline box appearance: Inline boxes form visually as lines. Width, height and overflow do not apply to inline boxes.

Inline boxes

This is a heading
Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet dolore magna aliquam erat volut. Dolor sit amet consect etuer adipi scing elit sed diam nonu nibh euismod tinunt ut laoreet dolore magna aliquam erat magna aliquam.

Inline box width: By default, inline box width collapses. The width cannot be sized or stretched.

dolor sit amet consect etuer adipi scin Ansed nibh euismod tinunt laore magna aliquam erat volut nostrud ex
Collapsed width

Inline box height: By default, inline box height collapses. The height cannot be sized or stretched.

dolor sit amet consect etuer adipi scin Ansed nibh euismod tinunt laore magna aliquam erat volut nostrud ex
Collapsed height

Inline box margin: Can be applied to all sides but only affects content on left and right sides.

dolor sit amet consect etuer adipi scin sed nibh euismod tinunt laore magna aliquam erat volut nostrud ex
Margin affects sides only

Inline box padding: Can be applied to all sides but only affects content on left and right sides.

dolor sit amet consect etuer adipi scin sed nibh euismod tinunt laore magna aliquam erat volut nostrud ex
Padding affects sides only

Inline box border: Can be applied to all sides but only affects content on left and right sides.

dolor sit amet consect etuer adipi scin sed nibh euismod tinunt laore magna aliquam erat volut nostrud ex
Border affects sides only

Inline box overflow: Overflow does not apply to inline elements.

Inline box model: Margin, padding and border affect content on either side of inline boxes only.

dolor sit amet consect etuer adipi scin S nibh euismod tinunt laa magna aliquam erat volut nostrud ex
Border and padding affect sides only

3. Inline block box model

Inline block box appearance: Inline block boxes appear within lines of text like inline boxes. However, they have width, height, margin, border and padding like a block box.

Inline block box

Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nibh.

Inline block box width: By default, inline block box width collapses. The width can be sized or stretched.

Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nibh. Collapsed width Lorem ipsum dolor sit amet consect etuer adipi scing elit Sized width Lorem ipsum dolor sit amet consect etuer adipi scing elit Stretched width

Inline block box height: By default, inline block box height collapses. The height can be sized but not stretched.

Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nibh. Collapsed height Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nibh.
Sized height

Inline block box margin: Affects all sides of the box.

p { display: inline-block; margin: 0 0 1.5em; }

Lorem ipsum dolor

sit amet laite a

consect etuer adipi scing elit sedium Margin affects all sides diam nibh.

Inline block box padding: Can be applied to all sides.

p { display: inline-block; padding: 5px; }

Lorem ipsum dolor

sit amet laite a

consect etuer adipi scing elit sedium Padding affects all sides diam nibh.

Inline block box border: Can be applied to all sides.

p { display: inline-block; border: 5px solid red; }

Lorem ipsum dolor

sit amet laite a

consect etuer adipi scing elit sedium Border affects all sides diam nibh.

Inline block box overflow: Overflow can be applied to inline block boxes.

div { display: inline-block; overflow: hidden; }

Lorem ipsum dolor sit amet consect more etuer adipi scing elit sed diam nibh.
Overflow

Inline block box model: Inline block boxes use an additive model. Padding and border are added to overall width/height.

4. Table box model

Table box appearance: Be default, tables are unlike other box models. Width and height refer to outside of the borders.

Table box width: By default, table box width collapses. The width can be sized and stretched.

n1 n2 n3 n4 n1 n3 n1 n3 n2 n4
Sized width Stretched width Collapsed width

n2 n4

Table box height: By default, table box height collapses. The height can be sized (as long as the size is larger than table cell content) but not stretched.

n1 n2 n3 n4 n1 n2

Collapsed height

Sized height

n1 n2

Table box margin: Affects all sides of the box. Margin-collapse occurs when in contact with block level elements above and below.

n1 n2 n3 n4
Margin collapse

n1 n2 n3 n4

Table box padding: Can be applied to all sides. Padding is subtracted from to the overall width/height of the box. Padding is not applied when border-collapse property is applied to table.

n1 n2 n3 n4

Table padding

n1 n2 n3 n4

Table padding with border-collapse

Table box border: Can be applied to all sides. Border width is subtracted from the overall width/height of the box.

n1 n2 n3 n4

Table border

n1 n2 n3 n4

Table border with border-collapse

Table box overflow: Overflow cannot be applied to table boxes - but can be applied to the <tbody> element.

Table box model: Padding & border are subtracted from overall width/height.

border padding 5px 10px content = 200px 10px 5px

Total width = 200px

5. Table cell box model

Table cell box appearance: Table cells form visually side by side within table rows.

n1 n2 n3 n4

Table cell

Table cell box width: By default, table cell width is collapses. This width can be sized and allowed to stretch. Content such as long words, and replaced elements can override width.

n1 n2 n1 n1 n1 n2

Collapsed width

Sized width

n2 verylongwordhere

Stretched width

Content can override width

Table cell box height: By default, table cell box height collapses. This height can be sized but not stretched.

n1 n2 n1 n2

Collapsed height

Sized height

Table cell box margin: Does not apply.

Table cell padding: Can be applied to all sides. Padding is added to the overall width/height of the box.

n1

n2

Table cell padding

Table cell box border: Can be applied to all sides. Border width is added to the overall width/height of the box. Borders between cells will include space unless cellspacing or border-collapse are applied.

n1 n2 n3 n4

Table cell borders

n1 n2 n3 n4

Table cell borders with no cellspacing

Table cell box overflow: Overflow does not apply.

Table cell box model: Table cell boxes use an additive model. Padding and border are added to overall width/height.

border padding

5px 10px

content = 200px

10px 5px

Total width = 230px

6. Absolute box model

Absolute box appearance: Absolute boxes are removed from flow. Other elements in flow will ignore the absolute box.

Left, right, top, bottom: Absolutely positioned boxes are positioned in relation to the nearest parent with position or the viewport (if no positioned parent is present).

Absolute box width 1: By default, absolute boxes are set to width: auto which will collapse the boxes width.

Lorem ipsum dolor sit

Width: auto Model: collapsed

Absolute box width 2: By default, absolute boxes are set to left: auto and right: auto which will also collapse the boxes width.

Lorem ipsum dolor sit

Left: auto Right: auto Model: collapse

Absolute box width 3: If both left and right are set to 0 the box is stretched.

Lorem ipsum dolor sit

Left: 0 Right: 0 Width: auto Model: stretched

Absolute box width 4: If left is a value, width is a value and right is auto, the box is sized and offset from the left.

Lorem ipsum dolor sit

Left: 10px Right: auto Width: 200px Model: sized

Absolute box width 5: If right is a value, width is a value and left is auto, the box is sized and offset from the right.

Lorem ipsum dolor sit

Right: 10px Right: auto Width: 200px Model: sized

Absolute box height: Absolute box height works like width.

Absolute box margin: Margins can be applied to all sides. Margins push the box away from its position.

Lorem ipsum dolor sit

Absolute box with no margin

Lorem ipsum dolor sit

Absolute box with margin

Absolute box padding 1: Padding will expand a collapsed or sized box.

Lorem ipsum dolor sit

Absolute box with no padding

Lorem ipsum dolor sit

Absolute box with padding

Absolute box padding 2: Padding will reduce the width or height of the content area of a stretched box.

Lorem ipsum dolor sit Absolute box without padding Lorem ipsum dolor sit

Absolute box with padding

Absolute box border 1: Border will expand a collapsed or sized box.

Lorem ipsum dolor sit

Absolute box with border

Lorem ipsum dolor sit Absolute box with no border

Absolute box border 2: Border will reduce the width or height of the content area of a stretched box.

Lorem ipsum dolor sit Absolute box without border

Lorem ipsum dolor sit

Absolute box with border

Absolute box overflow: Overflow can be applied to absolute boxes.

div { overflow: hidden; }

Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut.

Overflow: visible

7. Float box model

Floated box appearance: A floated box is positioned within the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.

Float box width: The default is width:auto which will collapse the float box to the width of the widest line. Float box width can be sized or stretched.

Collapsed Lorem ipsum dolor sit amet Stretched Lorem ipsum dolor sit amet consect etuer adipi scing elit sed diam nonummy nibh euismod tinunt ut laoreet. Sized Duis autem vel eum iriure dolor in hendrerit in vulputate velit ess.

Float box height: The default is height:auto which will collapse the float box to the height of all of its child elements. Float box height can be sized but not stretched.

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum eu feugiat nulla facilisis vel illum dolore eu feugiat. Duis autem vel eum iriure dolor in hendrerit in.

Collapsed

Sized

Float box margin: Can be applied to all sides. Left/top margins push float box away from original position. Right/bottom margins affect wrapping content.

Float box padding: Can be applied to all sides. Padding is added to the overall width/height of the box.

Float box border: Can be applied to all sides. Border width is added to the overall width/height of the box.

Float box overflow: Overflow can be applied to float boxes.

Float box model: Float boxes use an additive model. Padding and border are added to overall width/height.

border padding 5px 10px content = 200px 10px 5px

Total width = 230px

Russ Weakley
Max Design
Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign Linkedin: linkedin.com/in/russweakley