Deep understanding of the differences between block-level elements and intra-row elements in CSS (personal error points), css error-prone

Deep understanding of the differences between block-level elements and intra-row elements in CSS (personal error points), css error-prone

Difference 1:

Block-level: a block-level element occupies only one row. By default, the width of the parent element is automatically filled with the width.

In-row: an element in a row does not exclusive to a row, and an element in an adjacent row is placed in the same row. The width varies with the content.

Difference 2:

Block level: You can set the width and height of block level elements.

Intra-row: Intra-row elements cannot be set in width or height.

Difference 3:

Block level: display: block;

Intra-row:Display: inline;

You can change the display attribute to block-level and intra-row elements.

Difference 4:

Block level: You can set margin and padding for block level elements.

In-row: margin-left in the horizontal direction of row elements; margin-right; padding-left; padding-right; can take effect. However, margin-bottom; margin-top; padding-bottom; in the vertical direction cannot take effect.