What is the box model of css?

The innermost box in the figure is the actual content of the element, that is, the element box, and the inner margin padding is next to the outside of the element box. Next is the border, and then the outermost layer is the margin, which constitutes the box model as a whole. Usually the background display area we set is the range of content, padding, and border. The outer margin margin is transparent and will not block other surrounding elements.

Then, the total width of the element box = the width of the element (element) + the value of the left and right margins of the padding + the value of the left and right margins of the margin + the left and right width of the border;

The total height of the element box = the height of the element (element) + the value of the upper and lower margins of padding + the value of the upper and lower margins of margin + the upper and lower width of border.

We can transfer these attributes to the boxes (boxes) in our daily life to understand. The boxes we see in our daily life are also boxes that can hold things, and they also have these attributes, so Call it box mode.

Features

Imagine a box that has four attributes: margin, border, padding, and content;

p>

Let’s look down on this box. It has four sides: up, down, left, and right, so each attribute includes four parts except content: up, down, left, and right; these four parts can be set at the same time or separately; inside The margin can be understood as the distance between the contents of the box and the frame, and the frame has thickness and color. The content is the thing in the middle of the box, and the margin is the blank space automatically left outside the frame.

Structure Editing

Content (CONTENT) is what is in the box;

And filling (PADDING) is afraid of what is in the box (precious) Added foam or other anti-seismic accessories due to damage;

The border (BORDER) is the box itself; as for the border (MARGIN), it means that when the boxes are placed, they cannot all be stacked together, and a certain gap must be left Keep it ventilated, but also for easy removal. In web design, the content often refers to text, pictures and other elements, but it can also be a small box (DIV nesting). Unlike the box in real life, things in real life generally cannot be larger than the box, otherwise the box will be supported. Bad, and the CSS box is elastic, and the things inside are bigger than the box itself at most to stretch it, but it will not be damaged.

Padding only has a width attribute, and each HTML tag can be regarded as a box;

The above is what is the box model of css? For more details, please pay attention to other related articles on 1024programmer.com!