Margin,padding of CSS Elements

I. Classification of elements

1. Inline element: Not exclusive row, cannot set the width height, the margin,padding to its setting, does not affect the vertical position.

such as <a>, <span>, <br>, <i>, <em>, <strong>, <label>, <q>, <var>, <cite>, <code>, .....

A: The inline element setting padding attribute top,left,bottom,right will take effect; However, setting the Padding-top property to inline elements will only hold up to the top of the browser, Padding-top is higher than the distance to the browser, and the element will not move down because the Padding property set on it does not affect the row height of the element , you can set the Line-height,vertical-algin property if you want the element to move up or down.

Purpose: Padding can be used when adding backgrounds to inline elements, but the background color overrides the surrounding elements.

B: When setting the Margin property on an inline element, only margin-left,margin-right will take effect.

2. Block-level elements: an exclusive row that can be set to a wide height.

such as <div>, <p>,

A: You can set margin,padding for it to take effect.

Purpose: Margin adjusts the distance between elements, padding the element, and adds a background, which can be adjusted when the element is centered (padding)

Note: The vertical margin appears when a block-level element uses margin (The block-level elements in the normal document stream appear, inline, float, and do not appear to be positioned).

Profit-"will make the adjacent elements will not appear between the margin height overlap Add, will take two margin between the most distance."

Disadvantage-"Set the margin-top will be to the parent element layer to find border,padding , if not, then relative to the browser."

Use: negative margin, can be used to write the navigation bar, tab, margin-left:-(border width) px; You can make the navigation border overlap does not appear two.

Let the element in a position above an element, with a negative margin, imitating the positioning .

Usage:margin-left and Margin-top are the margins of an element relative to the parent element or adjacent elements, while Margin-right,margin-bottom is the margin relative to the element itself. So when the element's margin-bottom is negative, it causes the element under its position to come up.

3. Inline block element: Not exclusive row, you can also set the width of the high.

such as , <input>

Purpose: for layout , simulate float, set each element to inline-block so that the element is displayed on one line.

Note: Inline-block the spacing between adjacent elements, remove the spacing, you need to make the parent element of the font-size:0, the child element rewrite Font-size,

Compatible: Make child element {*display:inline;*zoom:1;} IE6 and IE7 do not support Display:inline-block, you can set Display:inline, and then set Zoom:1 trigger haslayout to resolve.

Margin,padding of CSS Elements