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.
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
- Meyer, Eric. "Basic Boxes." CSS: The Definitive Guide, Third Ed. Sebastopol, CA: O'Reilly Media, Inc., 2007: 158.