The components of the box model : border, content, padding, and margins. Generally, in actual development, the inner and outer margins will be cleared at the beginning, and then based on the actual situation Set up.
Inner margin : Control the distance between the content and the border.
How to set the padding:
padding-方位名词：像素值；
Inner margin shorthand rule :
Note :
If the inner box does not specify a width, the inner box setting padding will not open the outer box
Margin : Control the distance between boxes. The syntax of outer margins is basically the same as that of inner margins
Application of margins :
1. Make the box horizontally centered in the browser, but two conditions need to be met:
a. The box must have a width (width)
b. Set both the left and right margins to auto.
2. Make inline elements or inline block elements horizontally centered: add text-align:center to the parent element
3. The problem of merging outer margins:
a. The
solution for merging the vertical outer margins of adjacent block elements : only set outer margins for one box.
b. Vertical margin collapse of nested block elements. That is, for two parent-child block elements, the parent element has a top margin while the child element also has a top margin. At this time, the parent element will collapse with a larger margin.
Solution :
1. Add a border to the parent element. If the border affects the visual effect, it can be set to transparent (transperent).
2. Add an inner margin to the parent box.
3. Add overflow: hidden to the parent element. This method will not change. Box size
Compound writing of border :
boder: 属性值1 属性值2 属性值3 （没有顺序）
//若只想对上下左右中的一部分边框进行修改，写法如下：
boder-方位名词: 属性值1 属性值2 属性值3 （没有顺序）
Border merge of the table : boder-collapse; when the property value is collapse, adjacent borders will be merged automatically
Note : Box size = actual box size + border size + inner margin size.
