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.