Common block-level elements and inline elements
1, block-level elements (p, HR, Div, table, UL, OL, Li, H1-h6)
2. Inline elements (A, IMG, input, span)
Block-level elements and inline elements are converted to each other
1, Display:inline; Block-level transfer inside element
2, Display:block; Inline elements into block-level elements
3, Display:inline-block; Features inline and block-level elements: width, height is affected; does not fill a single line
CSS Box model
inner pitch: padding
padding:10px; Up or down 10px
padding:10px 20px; Up and down 10px, around 20px
padding:10px 20px 10px; On 10px, about 20px, next 10px
padding:1px 2px 3px 4px; On 1px, right 2px, next 3px, left 4px
Outer space: Margin
margin:10px; Up or down 10px
margin:10px 20px, up and down 10px, about 20px
margin:10px 20px 10px; 10px, 20px, Lower 10px
margin:1px 2px 3px 4px, Upper 1px, right 2px, Lower 3px, left 4px
Note: The margin on the inline element only supports the left and right, does not support up and down; padding full support.
September 22, 2015 CSS second session