Deep understanding of the difference between block-level elements and inline elements in CSS (individual error points)

Difference One:

Block-level: block-level elements will have a single row, and width automatically fills the width of its parent element by default

Inline: Inline elements do not monopolize a row, and adjacent inline elements are lined up in the same row. Its width changes depending on the content.

Difference Two:

Block-level: block-level elements can be set to a wide height

Inline: In-line elements cannot be set to width height

Difference Three:

Block level: Display:block;

In line :display:inline;

You can toggle block-level elements and inline elements by modifying the display property.

Difference Four:

Block level: block-level elements can be set margin,padding

In-line: the horizontal direction of the elements in the margin-left; Margin-right; Padding-left; Padding-right; can take effect. But the vertical direction of the margin-bottom; Margin-top; Padding-top; Padding-bottom, but not effective.

Deep understanding of the difference between block-level elements and inline elements in CSS (individual error points)