CSS Box Model

　The so-called box model treats the html element as a box. In daily life, boxes are the most common items. For example, a box of mooncakes has an outer packaging box, an ordinary iron box inside, and plastic or paper packaging inside. There are several small packages in a large box. In the same way, each tag in HTML is regarded as a shaped box, and the relationship between tags can be regarded as the relationship between boxes.

The box model consists of: content: what the element wants to present

　　　　Padding: the distance between content and border

　　　　　 Border

　　　　　Margin: the distance between boxes

　The width and height attributes are the width and height attributes of the content (content), not the width and height of the element.

The width of the element = left margin + left border + left padding + width + right padding + right border + right margin

The height of the element = top margin + top border + top padding + height + bottom padding + bottom border + bottom margin

　It can be inferred from the above formula that the properties of each edge can be set separately (in clockwise direction).

　For example: padding:10px; (equivalent to setting 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;)

The same applies to other margins and borders.