Block-level elements:
There are line breaks before and after
You can set attributes such as width and height, as well as margins, refer to the box model
Can contain other block-level elements inside, inline Element
The width defaults to the width of the parent element, and the height can be set or determined by the height of the content
Inline elements:
No line breaks before and after
Setting the width and height of the element is invalid. The height is determined by line-height (calculated by font-size when not set), and the width is determined by The content is determined by the amount of content. When the width is greater than the width of the parent element, the inline element will be broken to the next line. For inline elements, you can set padding, margin, etc. in the horizontal direction, but for the vertical direction, setting padding and margin will look like It will have an effect but it will have no effect on the browser and will not affect the layout of other elements.
Cannot contain other elements
But some of the inline elements are replacement elements (the browser finalizes it based on the attribute setting when loading (like), you can set attributes such as width and height, for example: img, input
Set display: block/inline-block
Set the element to float
Set the position of the element: relative/absolute/fixed
For more articles related to the comparative analysis of block-level elements and row-level elements in HTML, please pay attention to the PHP Chinese website!