css boxmodel

CSSBOX MODEL

What is thebox model?

The CSS box model describesthe rectangular boxes that are

created for every element in thedocument tree.

The box modelcomponents

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

MarginCan be applied to the outside ofelements. Margins create spacebetween the edge of an element

and any adjacent elements.

p {margin: 5px; }

Background-colorSets the background color of an

element.

p {background-color: #eee; }

Background-imageApplies a background image to

an element. Appears will on top ofany background-color.

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

BorderSpecifies the width, color andstyle of a border that is then

added to the outside of an HTMLelement.

p {border: 5px solid red; }

PaddingCan be applied to the outside ofthe content area of an element.

Creates space between the edgeof the element and its content.

p {padding: 5px; }

Content areaCan be given width, height and

overflow - depending on the typeof box model.

p {width: 500px; }

OverflowDetermines what happens when

an element’s content is largerthan the content box.

p {overflow: hidden; }

Box modelsize options

There are three different ways thatwidth and height can be applied

to boxes.

SizedA box is sized when it is given an

explicit width or height(eg. pixels or ems)

Duis autem vel eum iriure dolor inhendrerit in vulputate velit essemolestie consequat, vel illum doloreeu feugiat nulla facilisis.

Sized(eg. width: 200px)

Duis autem vel eum iriure dolor inhendrerit in vulputate velit essemolestie consequat, vel illum doloreeu feugiat nulla facilisis. Sized

(eg. height: 200px)

StretchedA box is stretched when it

stretches to the full width orheight of the parent container or

the viewport.

Lorem ipsum dolor sit amet consect etuer adipi scing elit seddiam nonummy nibh euismod tinunt ut laoreet dolore magnaaliquam erat volut. Ut wisi enim ad minim veniam, quisnostrud exerci tatio.

Stretched(eg. width: 100%)

Collapsed“Collapsed” means the width or

height shrinks around the content.A box can collapse when width orheight 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 boxmodels

Many people assume that there isonly one box model, and it isused for all HTML elements.

This is not the case! There areactually seven different boxmodels - each with different

characteristics.

The seven different box models:

block box modelinline box modelinline-block box modeltable box modeltable cell box modelabsolute box modelfloat box model

1234567

1. Blockbox model

Block box appearance:Block boxes form visually a

blocks, they flow down the pagein normal flow.

Lorem ipsum dolor sit amet consect etuer adipi scingelit sed diam nonummy nibh euismod tinunt ut laoreetdolore magna aliquam erat volut.

This is a heading

Dolor sit amet consect etuer adipi scing elit sed diamnonu nibh euismod tinunt ut laoreet dolore magnaaliquam erat magna aliquam.

Block boxes

Block box width:By default, block boxes stretch tothe width of their containing blockor the width of the viewport. Their

width can be sized but cannotcollapse.

Lorem ipsum dolor sit amet consect etuer adipi scing elitsed diam nonummy nibh euismod tinunt ut laoreetdolore magna aliquam erat volut. Ut wisi enim ad minimveniam, quis nostrud exerci tatio.

Duis autem vel eum iriure dolor inhendrerit in vulputate velit essemolestie consequat, vel illum doloreeu feugiat nulla facilisis.

Stretched

Sized

Block box height:By default, block box heightscollapse. Their height can be

sized but not stretched.

Collapsed

Duis autem vel eum iriure dolorin hendrerit in vulputate velitesse molestie consequat, velillum eu feugiat nulla facilisis velillum dolore eu feugiat.

Duis autem vel eum iriure dolorin hendrerit in.

Sized

Block box margin:Affects all sides of the box.

Margin-collapse occurs when incontact with block level elements

above or below.

p {margin: 0 0 1.5em;

}

Duis autem vel eum iriure dolorin hendrerit in vulputate velitesse molestie consequat, velillum eu feugiat nulla facilisis vel.

Vulputate velit esse molestieconsequat, vel illum dolore eufeugiat nulla.

Margin collapse

Block box padding:Can be applied to all sides.

Padding is added to the overallwidth/height of the box.

p {padding: 5px;

}

Total width = 220px

content = 200px 10px 10px

padding

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;

}

Total width = 210px

content = 200px 5px5px

border

Block box overflow:Overflow can be applied to block

boxes.The default is overflowvalue is “visible”.

div {overflow: hidden;

}

Duis autem vel eum iriure dolorin hendrerit in vulputate velitesse molestie consequat, velillum eu feugiat nulla facilisis velillum dolore eu feugiat.

Horizontal overflow

Vertical overflow

Duis autem vel eum iriure dolorin hendrerit in vulputate velitesse molestie consequat, velillum eu feugiat nulla facilisis velillum dolore eu feugiat.

overflow: visible

Duis autem vel eum iriure dolorin hendrerit in vulputate velitesse molestie consequat, velillum eu feugiat nulla facilisis velillum 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 areadded to overall width/height.

Total width = 230px

content = 200px 5px10px 5px 10px

padding

border

Note:Older versions ofInternet Explorer

and boxes

Win/IE5 uses a different methodto set widths and heights for

boxes. If padding and border areapplied to an element, their

measurements are subtractedfrom the overall width.

Total width = 200px

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

padding

border

2. Inlinebox model

Inline box appearance:Inline boxes form visually as

lines. Width, height and overflowdo not apply to inline boxes.

Lorem ipsum dolor sit amet consect etuer adipi scingelit sed diam nonummy nibh euismod tinunt ut laoreetdolore magna aliquam erat volut.

This is a heading

Dolor sit amet consect etuer adipi scing elit sed diamnonu nibh euismod tinunt ut laoreet dolore magnaaliquam erat magna aliquam.

Inline boxes

Inline box width:By default, inline box width

collapses. The width cannot besized or stretched.

dolor sit amet consect etuer adipi scinAnsed nibh euismod tinunt laoremagna aliquam erat volut nostrud ex

Collapsed width

Inline box height: By default, inline box height

collapses. The height cannot besized or stretched.

dolor sit amet consect etuer adipi scinAnsed nibh euismod tinunt laoremagna aliquam erat volut nostrud ex

Collapsed height

Inline box margin:Can be applied to all sides butonly affects content on left and

right sides.

dolor sit amet consect etuer adipi scinsed nibh euismod tinunt laoremagna aliquam erat volut nostrud ex

Margin affects sides only

Inline box padding: Can be applied to all sides butonly affects content on left and

right sides.

Padding affects sides only

dolor sit amet consect etuer adipi scinsed nibh euismod tinunt laoremagna aliquam erat volut nostrud ex

Inline box border: Can be applied to all sides butonly affects content on left and

right sides.

dolor sit amet consect etuer adipi scinsed nibh euismod tinunt laoremagna 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 inlineboxes only.

dolor sit amet consect etuer adipi scinS nibh euismod tinunt laamagna aliquam erat volut nostrud ex

Border and padding affect sides only

3. Inline blockbox 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.

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

Inline block box

Inline block box width:By default, inline block box widthcollapses. The width can be sized

or stretched.

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

Lorem ipsum dolorsit amet consect etuer adipi scing elit

Loremipsum dolorsit amet consect etuer adipi scing elit

Collapsed width

Sized width

Stretched width

Inline block box height: By default, inline block box

height collapses. The height canbe sized but not stretched.

Lorem ipsum dolor sit amet consectetuer 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 sediumdiam nibh. Margin affects all sides

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 sediumdiam nibh. Padding affects all sides

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 sediumdiam nibh.

Border affects all sides

Inline block box overflow:Overflow can be applied to inline

block boxes.

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

}

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

Overflow

Inline block box model:Inline block boxes use an additive

model. Padding and border areadded to overall width/height.

4. Tablebox model

Table box appearance:Be default, tables are unlike other

box models. Width and heightrefer to outside of the borders.

Table box width:By default, table box width

collapses. The width can be sizedand stretched.

n1 n2

n3 n4

n1 n2

n3 n4

n1 n2

n3 n4

Collapsed width

Sized width

Stretched width

Table box height: By default, table box heightcollapses. The height can be

sized (as long as the size is largerthan 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 incontact with block level elements

above and below.

n1 n2

n3 n4

n1 n2

n3 n4

Margin collapse

Table box padding:Can be applied to all sides.

Padding is subtracted from to theoverall width/height of the box.Padding is not applied whenborder-collapse property is

applied to table.

n1 n2

n3 n4

Table padding

n1 n2

n3 n4Table padding with border-collapse

Table box border: Can be applied to all sides.

Border width is subtracted fromthe overall width/height of the

box.

n1 n2

n3 n4

Table border

n1 n2

n3 n4Table border with border-collapse

Table box overflow:Overflow cannot be applied to

table boxes - but can be appliedto the <tbody> element.

Table box model:Padding & border are subtracted

from overall width/height.

Total width = 200px

content = 200px 5px10px 5px 10px

padding

border

5. Table cellbox model

Table cell box appearance:Table cells form visually side by

side within table rows.

n1

n3 n4

Table celln2

Table cell box width:By default, table cell width iscollapses. This width can besized and allowed to stretch.

Content such as long words, andreplaced elements can override

width.

n1 n2

n1 n2

n1 n2

Collapsed width

Sized width

Stretched width

n1 verylongwordhere

Content can override width

Table cell box height:By default, table cell box heightcollapses. This height can be

sized but not stretched.

n1 n2 Collapsed height

n1 n2 Sized height

Table cell box margin:Does not apply.

Table cell padding:Can be applied to all sides.

Padding is added to the overallwidth/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 orborder-collapse are applied.

n1

n3 n4

Table cell bordersn2

n1

n3 n4

Table cell borders with no cellspacing n2

Table cell box overflow:Overflow does not apply.

Table cell box model:Table cell boxes use an additivemodel. Padding and border areadded to overall width/height.

Total width = 230px

content = 200px 5px10px 5px 10px

padding

border

6. Absolutebox model

Absolute box appearance:Absolute boxes are removed fromflow. Other elements in flow will

ignore the absolute box.

Left, right, top, bottom:Absolutely positioned boxes are

positioned in relation to thenearest parent with position or theviewport (if no positioned parent

is present).

Absolute box width 1:By default, absolute boxes are setto “width: auto” which will collapse

the boxes width.

Width: autoModel: collapsed

Lorem ipsum dolor sit

Absolute box width 2: By default, absolute boxes are

set to “left: auto” and “right: auto”which will also collapse the boxes

width.

Left: autoRight: auto

Model: collapse

Lorem ipsum dolor sit

Absolute box width 3:If both left and right are set to “0”

the box is stretched.

Left: 0Right: 0

Width: autoModel: stretched

Lorem ipsum dolor sit

Absolute box width 4:If left is a value, width is a valueand right is auto, the box is sized

and offset from the left.

Left: 10pxRight: auto

Width: 200pxModel: sized

Lorem ipsum dolor sit

Absolute box width 5:If right is a value, width is a valueand left is auto, the box is sized

and offset from the right.

Right: 10pxRight: auto

Width: 200pxModel: sized

Lorem ipsum dolor sit

Absolute box height:Absolute box height works like

width.

Absolute box margin:Margins can be applied to all

sides. Margins push the box awayfrom 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

Lorem ipsum dolor sit

Absolute box with no padding

Absolute box with padding

Absolute box padding 2:Padding will reduce the width orheight of the content area of a

stretched box.

Absolute box without padding

Lorem ipsum dolor sit

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 orheight of the content area of a

stretched box.

Absolute box without border

Lorem ipsum dolor sit

Absolute box with border

Lorem ipsum dolor sit

Absolute box overflow:Overflow can be applied to

absolute boxes.

div {overflow: hidden;

}

Lorem ipsum dolor sitamet consect etueradipi scing elit seddiam nonummy nibheuismod tinunt ut.

Overflow: visible

7. Floatbox model

Floated box appearance:A floated box is positioned withinthe normal flow, then taken out ofthe flow and shifted to the left orright as far as possible. Content

may flow along the side of a float.

Float box width:The default is “width:auto” whichwill collapse the float box to the

width of the widest line. Float boxwidth can be sized or stretched.

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

Duis autem vel eum iriure dolor inhendrerit in vulputate velit ess.

Stretched

Sized

Lorem ipsum dolor sit amet

Collapsed

Float box height: The default is “height:auto” which

will collapse the float box to theheight of all of its child elements.Float box height can be sized but

not stretched.

Collapsed

Duis autem vel eum iriure dolorin hendrerit in vulputate velitesse molestie consequat, velillum eu feugiat nulla facilisis velillum dolore eu feugiat.

Duis autem vel eum iriure dolorin hendrerit in.

Sized

Float box margin: Can be applied to all sides.

Left/top margins push float boxaway from original position.Right/bottom margins affect

wrapping content.

Float box padding:Can be applied to all sides.

Padding is added to the overallwidth/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 areadded to overall width/height.

Total width = 230px

content = 200px 5px10px 5px 10px

padding

border

Russ WeakleyMax Design

Site: maxdesign.com.auTwitter: twitter.com/russmaxdesignSlideshare: slideshare.net/maxdesignLinkedin: linkedin.com/in/russweakley