The Display:block 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 Display:inline 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.
Display:inline-block is simply to render an 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-block attribute value, so that it has both block width height and inline peer characteristics.