Css box model: Learning and sorting, for reference only, no detailed tests

There are two types of CSS box models: Standard (W3C) and non-standard (IE)

See the Standard

 

We can see that the IE box model also has the range of margin, border, padding, and content. Unlike the standard W3C box model, the content part of the IE box model contains border and pading.

The above content comes from the network:

 

The vertical outer margin is merged. I just want to separate the vertices with my parent element.

 

When adding a blank space outside the border.
When no background (color) is required in the blank area.
The gap between the two upper and lower boxes needs to be offset. For example, the margin of 15px + 20px will be blank with 20px.
When should padding be used at that time:
When adding a blank space in the border internal test.
When the blank area requires background (color.
The gap between the two boxes that are connected up and down is expected to be equal to the time between the two. For example, the padding of 15px + 20px will get a blank space of 35px.

Col is set to float: left, and set margin for col.

 

/* Firefox */

/* Safari */

<! Defined in DOCTYPE...>

Width:-webkit-calc (100%/6); width: calc (100%/6); width:-moz-calc (100%/6 );