boxes
Each box has a content area and optional surrounding padding, border, and margin areas. The size of each area is specified by properties. The margin, border, and padding can be broken down into top, right, bottom, and left segments. The perimeter of each boxes is called an “edge”, so each box has four edges.
There are four boxes (see box model):
- Content box:
- this area is given by the width and height of the box, which often depend on the element’s rendered content.
- Padding box:
- this area surrounds the content box. If the padding has 0 width, the padding edge is the same as the content edge.
- Border box:
- this area surrounds the padding box. If the border has 0 width, the border edge is the same as the padding edge.
- Margin box:
- this area surrounds the border box. If the margin has 0 width, the margin edge is the same as the border edge.
The background style of the content, padding, and border areas of a box is specified by the ‘background‘ property of the generating element. Margin backgrounds are always transparent.
The background of body is painted inside the margin box when there is no background styling of html.
