Inline tag
characteristic
Row display
You can not set the width, height
As well as support from the outside of the left and right padding
All row labels: A, B, strong, span, IMG, label, Button, INPUT, SELECT, TextArea
Block-level tag
characteristic
Occupy a separate line
You can set the width, height
As well as support from the outside of the left and right padding
All block-level elements: header, form, ul, ol, table, article, div, hr, aside, figure, canvas, video, audio, footer
Conversion characteristic line block
The most typical span and div elements and inline block elements
display
display: block; the characteristic elements into block
display: inline; is converted to the characteristics of the element row
Line characteristic and the converted block level
display:inline-block;
inline-block element row is converted block level meaning.
Note :
1. Parent width will not wrap
2.li there will be a small gap (half the font size), this gap is because the wording li
<ul> <li> ... <-! wording of this structure will be a small gap -> </ li> <li> ... </ li> </ ul>
<UL> <Li> ... </ Li> <Li> ... </ Li> <-! wording such a configuration is not a small gap -> </ UL>
3. When to fill the content element will appear down the situation, because the original alignment is lost (brave face), because this time add vertical-align: "top" / "bottom" (recommended property values ) / "middle"; can be solved,
Margin properties
Up and down from the outside will be combined to margin whichever is greater
By default, the elements from outside their own can not be directly applied to the parent, but the parent is passed to the
Solution: A parent plus add a border or padding, although both can solve the problem, but in the actual development
The most common is to add an element overflow: hidden; style.
