The difference between a block-level element and an in-line element

Block-level elements and inline elements are the two most basic elements of layout, common block-level elements have div,p,form,ul,ol,li and so on, common elements in the line are Span,strong,em and so on.
What is the difference between a block-level element and an inline element?
Block-level elements will have a single row, by default, the width of the parent element will automatically fill the width of the row elements are not exclusive row, the adjacent rows of elements will be arranged in the same row, until a row will not be wrapped, and its width varies with the content of the element changes.
Block-level elements can set the Width,height property, and the inline element sets the Width,height property to be invalid. Block-level elements even if the width is set, the exclusive row remains.
Block-level elements can set the margin and padding properties, the Argin and padding properties of the inline elements are strange, the horizontal direction margin-left,margin-right, Padding-left, Padding-right all produce margin effects, but vertical margin-top,margin-bottom,padding-top,padding-bottom do not produce margin effects.
The CSS-related properties of block-level elements and inline elements are display, where block-level elements correspond to display:block, and inline elements correspond to display:inline. We can modify the Dispaly property to toggle block-level elements and inline elements
--------------------------
Display:inline-block It is a block-level element within a row, it has the characteristics of block-level elements, you can set the length of the width, you can set the margin and the Padding property, but not the exclusive row, its width does not occupy the parent element, but the same as the inline element, Can be in the same line as other inline elements.
IE6 and IE7 are not supported by Display:inline-block, but can trigger it's haslayout
Such as:

IE6 and IE7 are not supported by Display:inline-block, but can trigger it's haslayout
Changing the label p to span can trigger an inline element haslayout to simulate the display:inline-block effect, and span is bottom aligned in Ie6/7, in ie8/f
Irefox is the top alignment, so need to *vertical-align:-10px;

The difference between a block-level element and an in-line element