“This is the 17th day of my participation in the August More Text Challenge.

The box model

What is a box model?

All HTML elements can be thought of as boxes, and in CSS, the term “box model “is used for design and layout.

The CSS box model is essentially a box that encapsulates the surrounding HTML elements, including: margins, borders, padding, and actual content.

The box model allows us to place elements in the space between other elements and the borders of surrounding elements.

To interpret this picture:

- Margin - Clears the border area. Margin has no background color, it is completely transparent - Border - the padding and content around the Border. The border is influenced by the background color of the box - Padding - clears the area around the content. Will be affected by the background color filled in the box - Content - The contents of the box, displaying text and imagesCopy the code

Note: In the box model, margins can be negative, and in many cases, a negative margin is used.

A border

A CSS border can be one or more lines around an element’s content and inner margin, for which you can customize their style, width, and color.

I won’t repeat the description of border properties here, but you can check them out in my previous article on borders (Portals).

From the outside

Margin attribute Sets all margin properties in a declaration. This attribute can have 1 to 4 values. The default value is 0.

-margin :10px 5px 15px 20px; Margin :10px 5px 15px; margin-top :10px; right: 5px; bottom: 15px; left: 20px; Margin :10px, 5px; margin:10px, 5px; Margin :10px; margin-top :10px; margin-right: 5px; margin-left: 5px; - All four margins should be 10px note: negative values are allowed.Copy the code
Property Value Value Description Auto Browser calculates margins. Length specifies the margin value in specific units, such as pixels, centimeters, etc. The default value is 0px. % specifies the margin as a percentage based on the width of the parent element. Inherit specifies that margins should be inherited from the parent element.Copy the code

Pay attention to the law oh, and the law of the border is the same, you can refer to memory.

padding

Padding property Sets all the padding properties in a single declaration. This attribute can have 1 to 4 values. The default value is 0.

Example: -padding :10px 5px 15px 20px; - Top padding is 10px - right padding is 5px - bottom padding is 15px - left padding is 20px - padding:10px 5px 15px; - Top fill is 10px - right fill and left fill is 5px - bottom fill is 15px - padding:10px 5px; - Top and bottom padding are 10px - right and left padding are 5px-padding :10px; - All four fills are 10px note: negative values are not allowed.Copy the code
Attribute Value Value Description Length Specifies the filling value in specific units, such as pixels and centimeters. The default value is 0px % specifies that padding based on a percentage of the width of the parent element specifies that the padding should inherit from the parent elementCopy the code

Write in the last

Ok, that’s the introduction of THE CSS box model, is not very simple, give it a try!

If the above content is not correct, welcome to dig friends to criticize.