The difference between Block,inline and Inlinke-block

The concept of the overall concept block and inline are briefly stated, and the complete and precise should be block-level elements (blocks level elements) and inline elements (inline elements). A block element is usually a separate piece of reality, a single line, and the inline element does not produce a newline before and after, and a series of inline elements are displayed on one line until the row is full. In general, HTML elements have their own layout level (block element or inline Element): Common blocks of elements have DIV, FORM, TABLE, P, PRE, H1~h6, DL, OL, UL and so on. Common inline elements are SPAN, a, strong, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR, and so on. The block element can contain both the block element and the inline element, but the inline element may contain only the inline element. Note that this is a general statement that each particular element can contain elements that are specific, so specific to individual elements, this rule is not applicable. For example, the P element can contain only the inline element, not the block element. In general, you can change the layout level of an element by Display:inline and Display:block settings. Block,inline and Inlinke-block details Display:block The block element will be exclusive, and multiple block elements will be each new row. By default, the width of the block element fills its parent element width automatically. The block element can set the Width,height property. A block-level element is still an exclusive row, even if it is set to a width. The block element can set the margin and padding properties. Display:inline inline elements do not have a single line, and multiple adjacent inline elements are arranged in the same row until a row is arranged before a new line is changed, and its width varies with the contents of the element. The inline element setting width,height property is invalid. The margin and padding properties of inline elements, horizontal padding-left, Padding-right, Margin-left, margin-right all produce margin effects, but vertical padding-top, Padding-bottom, Margin-top, margin-bottom do not produce margin effects. Display:inline-block, it's simple.Renders an object as a inline object, but the contents of the object are rendered as a block object. The inline objects are then lined up in the same row. For example, we can give a link (a element) Inline-block attribute value, so that it has both the width and height of the block and the inline of the peer characteristics. Added to the general we will use Display:block,display:inline or Display:inline-block to adjust the layout level of elements, in fact, display parameters far more than these three species, just more commonly used. IE (low version IE) is not support inline-block, so in IE in the use of display:inline-block elements, in theory, IE is not know anything else, but the use of display:inline-block in   IE triggers layout so that the inline element has the appearance of the Display:inline-block attribute.