CSS Box Model

CSSBox Model

What is the CSS box mode? Why is it a box? First, let's talk about the attribute names that we often hear in web design: content, padding, border, and margin all have these attributes.

These attributes can be transferred to the boxes in our daily life for understanding. The boxes we see in our daily life are a kind of boxes that can hold things. They also have these attributes, so it is called the box mode. CONTENT is the CONTENT in the box, and PADDING is the foam or other anti-seismic auxiliary materials added for fear of damage to the CONTENT in the box; the BORDER (BORDER) is the box itself. As for the BORDER (MARGIN), it means that when the box is placed, it cannot be all stacked together. Leave some gaps to maintain ventilation, and also to facilitate the removal. In webpage design, content often refers to text, images, and other elements, but it can also be a small box (DIV nesting). Unlike in real life, in real life, things generally cannot be bigger than the box, otherwise the box will be broken, while the CSS box is elastic, and the content inside is bigger than the box itself, but it will not be damaged. Fill only has the width attribute. It can be understood as the thickness of the anti-seismic auxiliary material in the living box, while the border has big and small colors, we can also understand the thickness of the box we see in our lives and the color of the box. The boundary is the distance between the box and other things.

Each HTML tag can be considered as a box;

Each box has four attributes: border, border, fill, and content;

Each attribute includes four parts: Top, right, bottom, and left. These four parts can be set at the same time or separately;