In HTML doc, each box has a content area that includes its content for e.g. text, an image, child boxes, or other element content. It also contains optional surrounding area such as padding, border, and margin areas.
The size of each of those areas is specified by their corresponding properties. We can set those property values as zero or even negative in the case of margins.
The following diagram shows how these areas relate and the terminology used to refer to the various parts of the box:
The margin, border, and padding can be broken down into top, right, bottom, and left segments. We can control each segment by its corresponding property.
The perimeter of content, padding, border, and margin is called an edge.
Each edge can be broken down into a top, right, bottom, and left side.
Each box has four edges each composed of four sides.
1. content (inner) edge
The content edge created by the width and height of the box, which often depend on the element’s content. The four sides of the content edge together define the box’s content box.
2. padding edge
The padding edge circles around the box’s padding.
If the padding is zero then the padding edge and the content edge overlaps – they essentially become the same lines.
The four sides of the padding edge together make the box’s padding box, which contains both the content and padding areas.
padding box = content + padding
3. border edge
The border edge circles around the box’s border.
If the border is zero then the border edge intersects with the padding edge.
The four sides of the border edge together make the box’s border box, which contains the box’s content, padding, and border areas.
border box = content + padding + border
4. main (outer) edge
The margin edge circles around the box’s margin.
If the margin is zero then the margin edge intersects with the border edge.
The four sides of the margin edge together make the box’s margin box, which contains the all of the box’s content, padding, border, and margin areas.
margin box = content + padding + border + margin
Few more things to know…
- The background of the content, padding, and border areas of a box is specified by its background properties.
- The border area can additionally be painted with a border style using the border properties.
- Margins are always transparent.
Credit: w3.org
basics box property style
