Boxes

Go to Previous Section:
ListsThis is the 11th section of the CSS Getting Started tutorial; it describes how you can use CSS to control the space that an element takes up when it is displayed. In your sample document, you change the spacing and add decorative rules.

Information: Boxes

When your browser displays an element, the element takes up space. There are four parts to the space that it takes up.

In the middle, there is the space that the element needs to display its content. Around that, there is padding. Around that, there is a border. Around that, there is a margin that separates the element from other elements.

The padding, border and margin can have different sizes on the top, right, bottom and left of the element. Any or all of these sizes can be zero.

Coloring

The padding is always the same color as the element's background. So when you set the background color, you see the color applied to the element itself and its padding. The margin is always transparent.

Borders

You can use borders to decorate elements with lines or boxes.

To specify the same border all around an element, use the border property. Specify the width (usually in pixels for display on a screen), the style, and the color.

The styles are:

You can also set the style to none or hidden to explicitly remove the border, or set the color to transparent to make the border invisible without changing the layout.

To specify borders one side at a time, use the properties: border-top, border-right, border-bottom, border-left. You can use these to specify a border on only one side, or different borders on different sides.

Example

This rule sets the background color and the top border of heading elements:

h3 {
  border-top: 4px solid #7c7; /* mid green */
  background-color: #efe;     /* pale green */
  color: #050;                /* dark green */
  }

The result looks like:

Stylish heading

This rule makes images easier to see by giving them a mid-gray border all round:

img {border: 2px solid #ccc;}

The result looks like:

Image:

Margins and padding

Use margins and padding to adjust elements' positions and to create space around them.

Use the margin property or the padding property to set the margin or padding widths respectively.

If you specify one width, it applies all around the element (top, right, bottom and left).

If you specify two widths, the first applies to the top and bottom, the second to the right and left.

You can specify all four widths in the order: top, right, bottom, left.

p.remark {
  border: 2px solid red;
  padding: 4px;
  margin-left: 24px;
  }

Action: Adding borders

Edit your CSS file, style2.css. Add this rule to draw a line across the page over each heading:

h3 {border-top: 1px solid gray;}

If you took the challenge on the last page, modify the rule you created, otherwise add this new rule to add space underneath each list item:

li {
  list-style: lower-roman;
  margin-bottom: 8px;
  }

Refresh your browser to see the result:

See a solution to this challenge.

What next?

Go to Next Section:
LayoutBy specifying margins and padding, you modified the layout of your document. On the next page you change your document's layout in other ways.