Talk about the understanding of CSS attribute margin

1.What is margin?
Margin is used to control the spacing of the space around elements, achieving the purpose of space spacing visually. Has corresponding margin relative to the previous element. Used to separate elements. Always transparent.

2. The problem of merging outer margins (see w3school) --- Premise: The element is in the document flow
2.1 When two vertical margins meet, the margins overlap in the vertical direction, and the final margin is equal to the larger value of the two;
2.2 When an element (without borders and padding) contains another element, it will overlap vertically;
2.3 When an element is empty (without margins and), its margins will overlap

3. The difference between margin in block elements and inline elements
Margin in block elements affects the top, bottom, left, and right of block elements and can be controlled at will; while in inline elements it only affects the elements in the horizontal direction.
Note: For replaceable inline elements, such as img, input, textarea, select, button, label, etc., you can control their width and height and convert them into display: inline-block. Therefore, margin can also be controlled up, down, left, and right.

4. Common bugs related to margin
4.1 IE6 double margin problem Description: When the first element contained in the parent element is a floating element, the double margin problem will occur;
Solution: display:inline
4.2 iIE6 floating element 3px spacing problem description: one floating element, the other is a non-floating element, there is a 3px spacing between the non-floating element and the floating element

5. The difference between padding and margin
Padding is located inside the border and has the background color. It is mainly used to separate content from elements. Margin is located outside the border and does not have a background color. It is mainly used to distinguish elements from each other and plays an isolation role.

6. Negative margin problem of margin (to be continued)
Using negative margins can solve many problems.

References
http://www.hicss.net/do-not-tell-me-you-understand-margin/
http://www.planabc.net/2007/03/18/css_attribute_margin/

<<: Detailed explanation of basic operation commands for Linux network settings

>>: Vue + element dynamic multiple headers and dynamic slots