The Margin and Padding Properties - Boxing with CSS, Part I: The Theory - HTML with Style

Boxing with CSS, Part I: The Theory

The Margin and Padding Properties

Margins and padding are specified in a straight-forward way with four properties for each, one for each side of the box, as well as two shorthand properties that save you typing.

Margin Properties

The margin-top, margin-left, margin-bottom and margin-right properties set the size of the margin of an element's box on each side of the box. The value can be a length, in which case the margin is set to this length. A percentage can also be specified, in which case the size of the margin is set to this percentage of the width of the containing block. Note that this is also the case for margin-top and margin-bottom; if the containing block is 20cm wide and 50cm high, and the margins are all set to 20%, then they will all be set to 4cm, even the top and bottom margins. I will not discuss the auto value at this time since it has to do with more complicated operations of the CSS visual formatting model. Here is an example of margins in use:

P {
  margin-top: 1em;
  margin-left: 1in;
  margin-right: 20%;
  margin-bottom: 20%;
}

In the above ruleset, margins of paragraph elements are set to 1 em on the top side of their boxes, 1 inch on the left side, and to 20% of the width of their containing box on the right and bottom.

Note that margin properties do not inherit, and that their initial value is 0. In truth, certain elements have default values other than 0, and that's why you don't get everything stacked up together when you look at an HTML document with no margins set by the author. The BODY element, for instance, usually has margins all around. These are not inherited by its children elements, but since they are drawn within the containing block within that margin, they are still placed at a distance from the edge of the viewport. So, even though margin properties (like padding properties, which we'll look at next) do not inherit, they have an effect on an element's children since they change the containing block defined by the element.

Padding Properties

The padding properties behave much like the margin properties do. Once again, you can specify a length or a percentage value, which refers to the width of the containing block.

The margin and padding shorthand properties

Much like the font property, the margin and padding properties are shorthands for the properties mentioned above.

And very similar is the padding property:

These properties may take a single value, in which case they set the same value for all sides of the box. If there are two values, the first one sets the values for the top and bottom of the box, and the other one for the sides. If there are three, the first one sets the top, the second one the sides, and third the bottom side. If there are four, they respectively set the top, right, bottom and left values. This is best illustrated by the following example:

H1 {
  /* 2 em on all sides */
  padding: 2em;
  /* 1 inch on top and bottom, 2 inches on sides */
  margin: 1in 2in;
  /* 3em on top, 20% on the sides, and 2em on the bottom */
  padding: 3em 20% 2em;
  /* 5 ex on the top, 2ex on the right,
     3ex on the bottom and 3ex on the left */
  margin: 5ex 2ex 3ex 3ex;
}

Produced by Stephanos Piperoglou

All Rights Reserved. Legal Notices.

URL: https://www.webreference.com/html//
Created: Nov 18, 1998
Revised: Nov 18, 1998