Block,inline and Inline-block Concepts and differences

Block,inline and inline-Block concept and the general concept of difference block and inline are two concepts that are abbreviated, complete and precise, that should be block-level elements (block element) and inline elements (inline element). 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. In general, the HTML element has its own layout level (block element or inline Element): Common block-level 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, etc. 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. 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 The Display:blockblock element will be exclusive to one 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. The block element can set the Width,height property. Block-level elements, even if they are set to a width, are still exclusive rows. The block element can set the margin and padding properties. The Display:inlineinline 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. The inline element setting width,height property is invalid. The margin and padding properties of the inline element, the horizontal direction of the padding-left, Padding-right, Margin-left, margin-right all produce margin effects; But the vertical direction of Padding-top, Padding-bottom, Margin-top, margin-Bottom does not produce a margin effect. Display:inline-The block simply renders the object 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-The block property value, which has both a block width height feature and an inline peer feature. General, we'll 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) is not supported inline-block, so in IE, the use of inline elements 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 elements have display: The representation of the Inline-block attribute.

Block,inline and Inline-block Concepts and differences