Block,inline and Inline-block

General Concepts The two concepts of block and inline are briefly stated, and the complete and exact words 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. generally speaking, HTML elements have their own layout level (block element or inline element): 0 Common block-level elements have DIV, FORM, TABLE, P, PRE, H1~h6, DL, OL, UL and so on. 0 Common inline elements are SPAN, a, strong, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR, etc. 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 detail comparison Display:block the 0block element is exclusive to one row, and multiple block elements are each new row. By default, the width of the block element fills its parent element width automatically. The 0block 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 0block element can set the margin and padding properties. Display:inline 0inline 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 0inline element setting width,height property is invalid. margin and padding properties of 0inline 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 0 Simply, the object is rendered 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. Supplementary Notes 0 Generally 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 three kinds, just more commonly used. 0IE (Low version IE) originally does not support Inline-block, so in IE in the use of inline elements display:inline-block, in theory, IE is not know anything else, but use display: Inline-block can trigger layout in IE, so that inline elements have the appearance of Display:inline-block attributes. original link