September 22, 2015 CSS second session

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