block, inline-block, inline element

inline element

All text-level labels are inline elements except p; a, b, br, span, code, select, label

• Can't set width and height
• The padding and margin in the horizontal direction can be set, but the vertical direction is invalid. (Only padding left, right and margin left, right can be set to change the width)
• The default width is the width of its own content
• Inline elements can only hold text or other inline elements.

inline-block element

img、input、

• Height, row height, margins and padding can all be controlled.
• The default width is 100% of the container
• Can accommodate inline elements and other block elements.

block level element

div 、 p、h1 - h6、ul 、dl、dt、form、hr、table、ol、li、caption、
(header、section、footer、aside、nav、main、article、figure）

• You can set the height, row height, margin, and padding.
• The default width is 100% of the container
• Can accommodate inline elements and other block elements.