A Complete Guide to Web Design

408 Chapter 23 – Cascading Style Sheets

Properties

Web Design in a Nutshell, eMatter Edition

chapter), so it is important to get a feel for how they work. For more information

on how box elements are formatted and interact with each other, see Section 4,

“Formatting Model” in the CSS specification online athttp://www.w3.org/TR/REC-

CSS1.

margin-top, margin-right, margin-bottom, margin-left

Values:

length|percentage|auto

Example:

IMG { margin-top: 0px }

IMG { margin-right: 12px }

IMG { margin-bottom: 0px }

IMG { margin-left: 12px }

Applies to:

All elements

Inherited:

No

These properties specify the amount of margin on specific sides of the

element (as called by name). Values can be specified in length units, as a

percentage based on the size of the element’s overall box width, or asauto,

which automatically fills in a margin amount based on other elements on the

page.

margin

Values:

length|percentage|auto

Example:

IMG { margin: 20px }

IMG { margin: 0px 12px 0px 12px }

IMG { margin: 0px 12px }

Applies to:

All elements

Inherited:

No

This is a shorthand property for specifying all the margins of an element.

Values can be entered as length units, as a percentage based on the size of

the element’s overall box width, or asauto, which automatically fills in a

margin amount based on other elements on the page.

If a single value is given, as in the first example, that value will apply to the

margins on all four sides of the box.