O'Reilly logo

Cascading Style Sheets: The Definitive Guide by Eric A. Meyer

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Margins

The most basic things you can add to an element are margins. These create extra blank space around an element. “Blank space” generally refers to the area in which other elements cannot also exist and in which the parent element’s background is visible. For example, look at Figure 7-5, which shows the difference between two paragraphs without any margins, and the same two paragraphs with some margins.

Paragraphs with, and without, margins

Figure 7-5. Paragraphs with, and without, margins

The simplest way to set a margin is by using the property margin.

Suppose we wish to set a quarter-inch margin on H1 elements, as illustrated in Figure 7-6. (A background color has been added in order to be able to see the edges of the content area.) For example:

H1 {margin: 0.25in; background-color: silver;}
Setting a margin for H1 elements

Figure 7-6. Setting a margin for H1 elements

This sets a quarter-inch of blank space on each side of an H1 element. In Figure 7-6, this is represented using dashed lines which are included for illustrative purposes. These lines would not actually appear in a web browser.

margin can accept any length measure, whether in pixels, inches, millimeters, or ems. However, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required