[CSS layout. 1] Box Model

 

Example:

. Box {
Width: 200px;
Border: 10px solid # 99c;
Padding: 15px;
Margin: 20px;
}

<P class = "box"> content </P>

As you can see, a box consists of four independent parts. The outermost part is the border (margin), which is always transparent. The second part is the border (Border), and the border can have different styles. The third part is the patch (padding), which defines the blank between the content area and the border (Border. The fourth part is the content area.

The background is the area within the border, including the patch and content area.

When you use CSS to define the width and height of your box, you do not define the total area occupied by the content area, patch, border, and border. Actually, you define the width and height of the content area.
.

In order to calculate the area occupied by the box, padding, border, and margin must be added. So,

The total length of the box is;

Left margin + Left Border + Left padding + width + right padding + Right Border + right margin

That is, the total length of the above box is: 20px + 10px + 15px + 200px + 15px + 10px + 20px = 390px. This means that the above box occupies the horizontal space of 390px.

The total height of the box is:

Upper margin + upper border + upper padding + height + lower padding + lower border + lower margin

That is, the total height of the above box is: 20px + 10px + 15px + 200px + 15px + 10px + 20px = 390px. This means that the above box occupies the vertical space of 390px.