Difference: Setting the width and height in inline elements is invalid and will not wrap automatically; while block-level elements can set width and height and can wrap automatically. In inline elements, the margin setting is valid in the left and right directions but not up and down, and the padding setting in the left and right directions is valid but not up and down; in block-level elements, both margin and padding are valid.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

In the basics of CSS, we often encounter block elements and inline elements. In actual development, they are often confused and difficult to remember. So what is the difference between inline elements and block-level elements? Let me introduce it to you below.

Definition of block-level elements and inline elements

What are block-level elements?

• Always start on a new line;

• Height, line height, and margins and padding are all controllable;

• The width defaults to 100% of its container unless a width is set.

• It can accommodate inline elements and other block elements

For example: