How to convert between css row-level elements and block-level elements

In CSS, you can use the display attribute to convert row-level elements and block-level elements. Set the "display:block;" style to row-level elements to convert them to block-level elements. Set the "display:inline;" style to convert to row-level elements.

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

Inline elements

span, i, a, img, etc. When displayed within a line, elements whose width and height cannot be set generally are inline elements.

Block-level elements

div, h1, p, li, etc. An element that occupies its own line and can set the width and height is a block-level element.

Convert block-level elements to inline elements

Set display: inline; in the block-level elements to make the block-level elements become inline element.

Convert inline elements into block-level elements

Set display:block; in inline elements to convert inline elements into block-level elements .

Convert block-level elements or inline elements into

Set display: inline-block; to make the block Level elements or inline elements become inline block-level elements and can be displayed on the same line. [Recommended tutorial: CSS video tutorial]

CSS display attribute

The display attribute specifies the type of box that the element should generate.

• block This element will be displayed as a block-level element, with line breaks before and after this element.

• #inline Default. This element will be displayed as an inline element with no line breaks before or after the element.

• #inline-block Inline block element. (New value in CSS2.1)

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of How to convert between css row-level elements and block-level elements. For more information, please follow other related articles on the PHP Chinese website!