CSS box models (box model)

The so-called box model is to treat HTML elements as a box. In daily life, boxes are the most common items. For example, a box of mooncakes, there are outside the box, inside is a general iron box, and then the inside is the plastic or paper packaging, a box of large packaging has several small packaging. As a matter of principle, each label in HTML is considered a box with a type, and the label can be seen as a box-to-box relationship.

Box Model composition: content: What elements are going to present

Padding (padding): The distance between content and borders

Border (border)

Margin (margin): The distance between boxes

The width and Height properties are the widths and heights of content, not the width and height of the element.

Element width = left margin + left border + left padding +width+ right padding + right margin

Height of element = Top margin + top border + top padding +height+ bottom padding + bottom border + bottom margin

It is inferred from the above formula that you can set the properties of each edge individually (in a clockwise direction).

For example: padding:10px; (equivalent to set to padding:10px 10px 10px 10px;)

padding:10px 20px; (equivalent to: padding:10px 20px 10px 20px;)

padding:10px 15px 20px; (equivalent to: padding:10px 15px 20px 15px;)

Other margin and border the same.

CSS box models (box model)