Eric Meyer states1:

CSS assumes that every element generates one or more rectangular boxes, called element boxes.

Each element box has a content area which contains the visible media within the box. In the case of a paragraph, the content area contains the textual information and any images within that P element.

The content area is surrounded by optional element box properties: padding, borders, and margins.

By default, padding is set to 0, and there is no border. Most tags also have 0 margins, but some tags, such as headings, paragraphs and lists have a default top and bottom margin.

Basic box diagram

This a paragraph. By default there is no padding and no right or left margins. I've set the border to 1 pixel so you can see the content area of the box. P tags typically have a default top and bottom margin. Margins are always transparent. We will cover border, padding and margins shortly.

In this example I've set a padding, border and right and left margins to make the paragraph a little more readable!

The box border, padding, and content area constitute the visible portion of a box. The margin is also part of the "box" but is not visible to the user, other than adding space around the box ... more on this later.

Resources

  1. Meyer, Eric. "Basic Boxes." CSS: The Definitive Guide, Third Ed. Sebastopol, CA: O'Reilly Media, Inc., 2007: 158.