Cascading Style Sheets/Box Model

Block-level and inline elements – the `display` property

W3C Specification CSS1 CSS2.1

CSS has no understanding of the semantics of the underlying document. In particular it has no idea that the p elements in the HTML fragment below should start on a new line whilst the em element should not.

    <p>This paragraph contains an <em>emphasised</em> word.</p><p>This paragraph does not.</p>

The display property provides this information.

CSS1 defines four values for display. CSS2.1 adds two more general purpose values plus a number of values for creating tables. The table values are described in Displaying Tables.

block – this causes the element to start a new line.
inline
list-item
none
inline-block (CSS2.1)
run-in (CSS2.1)

The values are explained in detail in later sections.

Note: in CSS1 the initial value for display is block. Under CSS2.1 this changes to inline. This property should be explicitly set for all element types that can occur in a document to ensure consistency between different implementations. Most web browsers will set appropriate values for elements in (X)HTML documents. (See Appendix D of the CSS 2.1 Specification for the suggested values.) In XML documents use a rule such as

* {
  display: block
}

to set the display property for all element types. Then use more specific rules to set the value for individual element types.

The display value affects the set of other properties that are valid for an element. For example the list properties are only valid if display is list-item. In the example below no bullets appear on the list items because display has been set to inline.

CSS rule:

li {
  display:inline;
  list-style-type:circle
}

Sample HTML:

    <ul>
      <li>Parsley, </li>
      <li>sage, </li>
      <li>rosemary and </li>
      <li>thyme.</li>
    </ul>

Example rendering:

Parsley, sage, rosemary and thyme.

`block`

An element with display set to block starts a new line. It also acts as a container for the content of its child elements.

`inline`

Elements with display set to inline flow with other content within the containing box of their nearest block ancestor. They do not start new lines.

The width and height properties are not valid on non-replaced inline elements. In (X)HTML documents replaced elements are embedded content such as images.

The alignment of inline elements is controlled by the vertical-align property. The initial value for this property is baseline. Since (X)HTML images are normally inline elements this means that the bottom edge of images are aligned with the baseline of the text. If there is no text on the line the web browser must still calculate where the baseline would be and leave the appropriate amount of room for it. This can cause problems when trying to align images.

`list-item`

list-item is similar to block except that it enables the list properties list-style-type, list-style-image, list-style-position and list-style.

`none`

When display is none the web browser must act as though the element and all its child elements do not exist. This can't be overridden by setting the display property on the child elements because they don't exist to have properties applied to them. The web browser must not leave any space on the display or print out or speak any of the content or give any other hint of the existence of the element.

Hiding elements with this value can be very useful in conjunction with CSS2.1 media types. For example you can specify that the navigation bar is removed from the printed page by setting its display value to none for print media.

If you want to simply hide the element whilst leaving a visible gap set the CSS2.1 property visibility to hidden.

`inline-block`

An inline-block element flows in the same manner as an inline element but it acts as a block container for its own children.

`run-in`

run-in allows a single element to be merged into the start of a block element that follows it immediately. The run-in element will only be merged if it doesn't contain any block elements. If a run-in element can't be merged it acts as though it was a block element.

CSS rule:

h1, h2 {
  display:run-in;
  margin-right:0.5em
}

h1 {
  font-size:120%
}

h2 {
  font-size:100%
}

Sample HTML:

    <h1>Main heading</h1>
    <h2>Sub-heading</h2>
    <p>Only the sub-heading is allowed to run into this paragraph.
      The heading can't be merged because only one <code>run-in</code> element is allowed.
    </p>

Example rendering:

Heading

Sub-heading Only the sub-heading is allowed to run into this paragraph. The heading can't be merged because only one run-in element is allowed.

Interaction with `float`

If the float property for an element is set to anything other than none the element behaves as though display is set to block regardless of its actual value.

The Box Model

The CSS box model is fundamental to laying out documents with CSS. The content of every element is rendered within one or more boxes. A CSS box consists of:

the content area,
surrounded by padding (optional),
surrounded by borders (optional),
surrounded by margins (optional).

If all three optional parts of the box are present then crossing the box from one outer margin edge to the content the following boundaries are encountered:

outer margin edge
outer border edge = inner margin edge
outer padding edge = inner border edge
content edge = inner padding edge

as illustrated by the following diagram.

This is the margin.

This is the border.

This is the padding.

This is the content area.

Height and Width

height W3C Specification CSS1 CSS2.1
width W3C Specification CSS1 CSS2.1

width is ignored by non-replaced inline elements, table columns and table column groups.

height is ignored by non-replaced inline elements, table rows and table row groups.

The width and height properties specify the dimensions of the content area (but see the section on quirks mode below). This is the distance from the inner edge of the padding on one side to the inner edge of the padding on the other side. The values may be given as non-negative lengths or percentages. If width is given as a percentage the value is based on the width of the containing block. If height is given as a percentage the value is based on the height of the containing block. If the height of the containing block is not an absolute value percentages may not work as expected. Refer to the W3C Specification for details.

It is usual to give the size of elements containg text in ems or percentages. Images and other replaced elements are normally sized in pixels (px).

CSS rule:

p {
  width:50%;
  height:3em;
  background:#cfc /* Set a background so the size of the content area is obvious. */
}

Sample HTML:

    <p>A short paragraph.</p>
    <p>Another short paragraph.</p>

Example rendering:

A short paragraph.

Another short paragraph.

Notice that the left edge of the text (the contents) touches the left edge of the background (the content area).

If the content area is too small the contents will overflow the box (except in Internet Explorer).

CSS rule:

p {
  width:8em;
  height:3em;
  background:#cfc /* Set a background so the size is of the content area is obvious. */
}

#para2 {
  color:red /* Make the text of the second paragraph stand out. */
}

Sample HTML:

    <p>A paragraph that is far too long for the tiny box it is supposed to fit inside.</p>
    <p id="para2">A short paragraph.</p>

Example rendering (this example does not work in Internet Explorer):

A paragraph that is far too long for the tiny box it is supposed to fit inside.

A short paragraph.

CSS2.1 minimum and maximum width and height

min-height W3C Specification CSS2.1
max-height W3C Specification CSS2.1
min-width W3C Specification CSS2.1
max-width W3C Specification CSS2.1

CSS2.1 introduces four extra properties min-width, max-width, min-height and max-height. For example, suppose you are creating a layout with two columns side by side on the page. You want the column for the main content to be 27em wide but no more than 75% of the page width. The navigation column should be 9em or 25%. The appropriate rules would be:

#content {
  width:27em;
  max-width:75%
}

#navigation {
  width:9em;
  max-width:25%
}

The min-width property is often used with a length in pixels to ensure that a column does not become too narrow for the images it contains.

Internet Explorer does not support these CSS2.1 properties.

Internet Explorer Quirks Mode

Internet Explorer versions 5.0 and 5.5 allow width and height on non-replaced inline elements. Internet Explorer version 6 also applies these properties if it is in quirks mode. In standards mode it correctly ignores them on non-replaced inline elements.

In quirks mode width and height incorrectly set the distance between the outer edges of the borders not the edges of the content area.

CSS 3 Box Models

The current draft of CSS3 introduces a new property, box-sizing. This property takes one of two values, content-box or border-box.

When the value is set to content-box the normal CSS1/CSS2.1 box model is used so width and height define the size of the content area.

When the value is set to border-box the width and height properties set the distance between the outer edges of the borders, i.e. the box behaves like a quirks mode box.

Mozilla Firefox does not support box-sizing but instead uses -moz-box-sizing for the same purpose.

Padding

Padding is blank space inserted between the content of the element and its border. The element's background is seen through the padding. The padding is set by four properties:

padding-top W3C Specification CSS1 CSS2.1
padding-right W3C Specification CSS1 CSS2.1
padding-bottom W3C Specification CSS1 CSS2.1
padding-left W3C Specification CSS1 CSS2.1

The padding can either be set to a length, e.g. 1em, or a percentage, e.g. 5%. Values must not be negative. Percentages are relative to the width of the containing block even for the top and bottom padding.

CSS rules:

p {  
  padding-top:1em;
  padding-right:2em;
  padding-bottom:3em;
  padding-left:4em;
  background-color:#fc9;
  width:10em;
  text-align:justify
}

Sample HTML:

    <p>This text has padding around it. The orange backgound
      appears behind both the padding and the content.
    </p>

Example rendering:

This text has padding around it. The orange backgound appears behind both the padding and the content.

Shorthand property

W3C Specification CSS1 CSS2.1

The padding on all four sides can be set at once using the padding shorthand property. This takes a list of whitespace separated values. The first value is the top padding. The other values work clockwise round the sides, so right is second, bottom is third and left is last. The previous example could be shortened to:

p {
  padding:1em 2em 3em 4em;
  background-color:#fc9;
  width:10em;
  text-align:justify
}

You can specify fewer than four values in the list for padding. If the value for the left padding is missing it is set equal to the right padding. If the value for the bottom padding is missing it is set equal to the top padding. If only the top padding is given all the sides are given the same padding.

p {
  padding:1em 2em 3em 4em; /* top = 1em, right = 2em, bottom = 3em, left = 4em */
}

p {
  padding:1em 2em 3em; /* top = 1em, right = 2em, bottom = 3em, left = right = 2em */
}

p {
  padding:1em 2em; /* top = 1em, right = 2em, bottom = top = 1em, left = right = 2em */
}

p {
  padding:1em; /* top = 1em, right = top = 1em, bottom = top = 1em, left = top = 1em */
}

padding always sets the padding on all four sides. If you want to alter the padding on only some of the sides you must use the individual properties.

p {
  padding:0.5em
}

p.narrow {
  padding-left:1.5em;
  padding-right:1.5em
}

Margins

Margin is the outermost layer in the CSS box model, located outside of border.

CSS properties that enable setting of the width of the margin:

margin-top W3C Specification CSS1 CSS2.1
margin-right W3C Specification CSS1 CSS2.1
margin-bottom W3C Specification CSS1 CSS2.1
margin-left W3C Specification CSS1 CSS2.1

Shorthand property

W3C Specification CSS1 CSS2.1

Box shadow

Box shadow is a part of CSS3. It creates a drop shadow that follows the shape of the box. It is currently supported by WebKit and Gecko. Box shadow takes 4 arguments and supports multiple shadows.

CSS3	WebKit	Gecko
box-shadow	-webkit-box-shadow	-moz-box-shadow

box-shadow: X-offset Y-offset blur/diffusion color;

This box should have a sharp rectangular shadow to the lower right.

div {
	border: 1px solid;
	box-shadow: 10px 10px 0px black;
	-webkit-box-shadow: 10px 10px 0px black;
	-moz-box-shadow: 10px 10px 0px black;
	padding: 0.5em;
}

This box should have a sharp round shadow to the lower right.

div {
	border: 1px solid;
	box-shadow: 10px 10px 0px black;
	-webkit-box-shadow: 10px 10px 0px black;
	-moz-box-shadow: 10px 10px 0px black;
	padding: 0.5em;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

This box should have a red diffuse round shadow to the upper left.

div {
	border: 1px solid;
	box-shadow: -10px -10px 5px red;
	-webkit-box-shadow: -10px -10px 5px red;
	-moz-box-shadow: -10px -10px 5px red;
	padding: 0.5em;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

This box should have a red, green and blue diffuse round shadows to the lower right.

div {
	border: 1px solid;
	box-shadow: 10px 10px 5px red, 15px 15px 5px green, 20px 20px 5px blue;
	-webkit-box-shadow: 10px 10px 5px red, 15px 15px 5px green, 20px 20px 5px blue;
	-moz-box-shadow: 10px 10px 5px red, 15px 15px 5px green, 20px 20px 5px blue;
	padding: 0.5em;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

Box Sizing

Box-sizing is a CSS3 property to make certain layouts simpler. Box-sizing is supported by WebKit, Gecko and Presto.

box-sizing take 1 argument that is any of the following:

content-box
boxes inside arrange normally.
border-box
boxes inside arrange around the border.
inherit
inherit the parent behavior.

W3C	WebKit	Gecko
box-sizing	-webkit-box-sizing	-moz-box-sizing

CSS fragment:

div.bigbox {
	width: 40em;
	border: 1em solid red;
	min-height: 5em;
}

div.littlebox {
	width: 50%;
	border: 1em solid;
	box-sizing: border-box; /* this will set the boxes to flow along the border of the containing box */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	float: left;
}

HTML fragment:

<div class="bigbox">
	<div class="littlebox" style="border-color: green;">This should be on the left.</div>
	<div class="littlebox" style="border-color: blue;">This should be on the right.</div>
</div>

This should be on the left.

This should be on the right.

The two boxes should be above this text side by side if your browser supports box-sizing.

Block-level and inline elements – the display property

block

inline

list-item

none

inline-block

run-in

Interaction with float

The Box Model

Height and Width

CSS2.1 minimum and maximum width and height

Internet Explorer Quirks Mode

CSS 3 Box Models

Padding

Shorthand property

Margins

Shorthand property

Box shadow

Box Sizing

Block-level and inline elements – the `display` property

`block`

`inline`

`list-item`

`none`

`inline-block`

`run-in`

Interaction with `float`