What are the attribute values ​​of display in css?

The display attribute values ​​in css include inline, block, inline-block, none, flex, grid, table, inline-table, list-item or inherit, etc. Detailed introduction: 1. inline, the element is displayed as an inline element and is displayed in the same line as adjacent elements. The width and height attributes have no effect, and the margin and padding attributes can only set the left and right values; 2. block, the element is Show etc.

The operating system for this tutorial: Windows 10 system, DELL G3 computer.

The display attribute in CSS is used to define the display mode of elements, which determines how the elements are presented on the page. The display attribute has the following common attribute values:

1. inline: The element is displayed as an inline element and is displayed on the same line as adjacent elements. The width and height attributes have no effect, and the margin and padding attributes can only set left and right values. Common inline elements include span, a, img, etc.

2. block: The element is displayed as a block-level element and occupies an exclusive line. The width and height attributes can be set, and the margin and padding attributes can be set in four directions. Common block-level elements include div, p, h1, etc.

3. inline-block: The element is displayed as an inline block-level element, displayed on the same line as adjacent elements. The width and height attributes can be set, and the margin and padding attributes can be set in four directions. Common inline block-level elements include buttons, inputs, etc.

4. none: The element is not displayed, that is, the element is hidden. Elements do not occupy any space on the page and do not respond to interaction events.

5. Flex: Use flexible layout to display elements, allowing for flexible layout. It enables elements to automatically resize and position based on available space. Usually used together with flex-direction, flex-wrap and other properties.

6. grid: Use grid layout to display elements, placing elements in a two-dimensional grid. Grid layout provides more precise layout control and can define the size, spacing, etc. of rows and columns. Usually used together with grid-template-columns, grid-template-rows and other attributes.

7. table: The element is displayed as a table, similar to the table element in HTML. The element will be parsed into a table object, which can contain sub-elements such as table header (thead), table body (tbody) and table footer (tfoot).

8. inline-table: The element is displayed as an inline table, displayed in the same line as adjacent elements. Similar to the table attribute, but displayed as an inline element.

9. list-item: The element is displayed as a list item, similar to the li element in HTML. Applies to subitems in unordered lists (ul) and ordered lists (ol).

10. inherit: Inherit the display attribute value of the parent element. If there is no parent element, it is considered a block.

These are some common attribute values ​​​​of the display attribute in CSS. By setting different display attribute values, you can flexibly control the way elements are displayed on the page and achieve various layout effects.

The above is the detailed content of What are the attribute values ​​of display in css?. For more information, please follow other related articles on the PHP Chinese website!