Difference between block-level elements and inline elements

Elements in the line (non-exclusive line):

a,button,big,small,datalist,em , i, input,mark,span,progress,s,strong,b,sub,sup,textarea u

(The basic elements related to text are inline elements)

Inline element features:

1. Non-monopoly party
2. Arrangement: from left to right
3. Usually use inline elements to build text, small icons, and small structures
4. Setting the width and height does not work. If you want to set the width and height, you need to convert it to a block-level element/inline-block element: display:block/display:inline-block
5. When the width and height are not set: the width and height of its own content is its width and height
6. Naturally comes with display:inline attribute
7. Block-level elements cannot be nested within inline elements (except for special a tags)
8. A tag cannot be nested within a tag. Even if we do, the browser will resolve it to a parallel relationship instead of a nested relationship.

Block-level element (on its own line):

table,form,dl,dt,dd,figure,figcaption,div,h1~h6,hr,ul,ol,li,nav,p,

Block-level element features:

1. Exclusive party
2. Arrangement: from top to bottom
3. Usually block-level elements are used for structural building
4. You can set the width and height and other properties of the box model
5. If the width and height are not set, its width is the width of the parent element, and its height is the height of its own content
6. Naturally comes with display:block;
7. Block-level elements can nest inline elements
8. ul , ol , below can only be li dl below can only be dt, dd
9. No block-level elements can be nested within the p element, including inline elements that can itself be nested

Inline block elements (born with display:inline-block):

img ,input