div css box model_html/css_WEB-ITnose

So why is it called a box? Let’s first talk about the attribute names we often hear in web design: content, padding, border, and margin. CSS box mode all has these attributes.

We can imagine it as a box with an opening at the top in reality, and then looking down from the top, the border is equivalent to the thickness of the box, and the content is relative to the space of the object contained in the box , and the filling is equivalent to the foam filled in the box for shockproof, and the boundary is equivalent to leaving a certain space around the box for easy removal. Is it easy to understand the box model in this way?

So the width of the entire box model on the page is composed of the left border, left border, left padding, right padding, right padding, right border, and right border, and the width defined by width in the css style is only the width of the content part. This is where many friends easily get confused

The boundaries here are also called: outer margins and outer patches; padding is also called: inner margins and inner patches