Home >Web Front-end >Front-end Q&A >What is the difference between inline elements and block-level elements in html/css
Difference: 1. Inline elements will not occupy the entire row, but will be arranged in a straight line, arranged horizontally; while block-level elements will occupy one line, arranged vertically. 2. Block-level elements can contain inline elements and block-level elements; inline elements cannot contain block-level elements. 3. The width and height of inline elements cannot be set.
Recommended: css video tutorial, html tutorial
Inline elements and The difference between block-level elements
1. Inline elements will not occupy the entire row. They are arranged in a straight line. They are all on the same line and arranged horizontally.
Block-level elements will occupy One row, arranged vertically.
2. Block-level elements can contain inline elements and block-level elements; inline elements cannot contain block-level elements.
3. The difference between the attributes of inline elements and block-level elements is mainly due to the box model attributes. The width and height settings of inline elements are invalid (line-height can be set), margin upper and lower are invalid, and padding upper and lower are invalid.
Conversion between inline elements and block-level elements
Convert inline elements to block elements: display:block;
Convert block elements to inline elements : display:inline;
For more programming-related knowledge, please visit: Programming Teaching! !
The above is the detailed content of What is the difference between inline elements and block-level elements in html/css. For more information, please follow other related articles on the PHP Chinese website!