The difference between Block,inline and Inline-block

transferred from: http://www.cnblogs.com/KeithWang/p/3139517.htmlGeneral concept

1. The two concepts of block and inline are abbreviated, complete and exact, block-level elements (block-level elements) and inline elements (inline elements). Block elements are usually separated by a separate line, and the inline element does not produce a newline, and a series of inline elements are displayed in a row until the row is full.
2. In general, the HTML element has its own layout level (block element or inline element):
   • Common block-level elements are DIV, FORM, TABLE, P, PRE, H1~h6, DL, OL, UL etc.
   • Common inline elements are SPAN, a, strong, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR, etc.
3. The block element can contain both the block element and the inline element, but the inline element can only contain inline elements. Note that this is a general statement that each specific element can contain elements that are also specific, so specific to individual elements, this rule is not applicable. For example, the P element can contain only inline elements, not block elements.
4. In general, you can change the layout level of an element by setting the Display:inline and Display:block.

Block,inline and Inlinke-block Details comparison

• Display:block

1. 1. The block element will have a single row, and multiple block elements will have their own new row. By default, the block element width automatically fills the width of its parent element.
   2. The block element can set the Width,height property. Block-level elements, even if they are set to a width, are still exclusive rows.
   3. The block element can set the margin and padding properties.

• Display:inline

1. 1. The inline element does not have a single row, and multiple adjacent inline elements are arranged in the same row until one line is not arranged before a new line is changed, and its width varies with the contents of the element.
   2. The inline element setting width,height property is invalid.
   3. The margin and padding properties of the inline element, horizontal padding-left, Padding-right, Margin-left, and margin-right all produce margin effects, but the vertical direction of the padding-top, Padding-bottom, Margin-top, Margin-bottom does not produce a margin effect.

• Display:inline-block

1. 1. In simple terms, the object is rendered as an inline object, but the object's contents are rendered as a block object. Subsequent inline objects are arranged in the same row. For example, we can give a link (a element) Inline-block attribute value, so that it has both block width height and inline peer characteristics.

Additional Information

• In 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 kinds, is only more commonly used.
• IE (low version IE) originally does not support Inline-block, so in IE, inline elements using Display:inline-block, in theory, IE is not the other, but the use of display:inline-block in IE will trigger layout , so that the inline element has the appearance of the Display:inline-block attribute.

The difference between Block,inline and Inline-block