The difference and usage of padding and margin in HTML and the elimination of bugs

About margin:
When you need to add a distance outside the border.
When the background is not needed in the blanks.
The two parts of the connection need to be added outside the margin when used.

About padding:
When you need to add a distance inside the border.
When a background is needed for the space.
The two parts of the connection need to be used when the internal margin is added.

IE6 in the double-sided bug:

Occurrence: Margin doubles when the first floating element within the parent element is set to Margin-left (element Float:left) or margin-right (element float:right).

Solution: To add display:inline to the floating element; CSS properties, or use Padding-left instead of margin-left.

Floating element 3px interval bug in IE6:

Occurrence: Occurs when an element floats, and then a non-floating element naturally floats close to the 3px bug that appears.

WORKAROUND: The right element also floats together, or add IE6 Hack _margin-left:-3px for the right element, eliminating 3px spacing.

Ie6/7 negative margin hidden bug:

Occurrence: When a negative Marin is set to a non-haslayout element within a parent element that has haslayout, the part of the parent element is not visible.

Workaround: Remove the haslayout of the parent element, or assign haslayout to the child element and add position:relative;

Ie6/7 the ul/ol tag disappears bug:

Occurrence: When Ul/ol triggers Haslayout and is written margin-left on Ul/ol, the previous default ul/ol tag disappears.

Workaround: Set Margin-left to Li instead of setting Margin-left for Ul/ol.

IE6/7 margin and absolute element overlap BUG:

Occurrence: The two-column adaptive layout, the left element absolute absolute positioning, the right margin to open the distance positioning. Block-level elements that have the absolute attribute applied to the left of IE6/7 overlap with the adaptive text content on the right.

Workaround: Change the left block level element to an inline element, such as changing the div to span.

IE6/7/8 Auto Margin Center bug:

Occurrence: Setting margin auto to block element cannot be centered

Workaround: The cause of this bug is usually no doctype, and then triggered the IE quirks mode, plus the DOCTYPE declaration can be. In the "Beat IE Sunflower Treasure Book" In the method is to add a width to block elements can be solved, but according to my own test, plus with this method is invalid, if there is no doctype even add width to the element can not let the block element center.

IE8 Input[button | submit] Setting Margin:auto cannot center the bug:

Occurrence: Under IE8, if a label such as button (such as button input[type= "button"] input[type= "Submit") set {display:block; margin:0 auto;} If you don't set the width, you can't center.

Workaround: You can add a width to input

IE8 percent padding vertical margin bug:

Occurrence: When the parent element sets a percentage of padding, the child element has a vertical margin, as if the parent element was set to margin.

Workaround: Add a Overflow:hidden/auto to the parent element.

The difference and usage of padding and margin in HTML and the elimination of bugs