-
- 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.
- 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 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.
- The inline element setting width,height property is invalid.
- 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.
-
- 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.
The difference between block inline Inline-block