Comparative analysis of block-level elements and row-level elements in HTML

About block-level elements and inline elements (comparison of inline elements)

Comparison of the two elements

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

Conversion of block-level elements and inline elements

• 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!