How to use display in css

The Display attribute controls how elements are displayed in web pages, and has the following possible values: inline (horizontal arrangement, no line wrapping), block (occupies the entire line, line wrapping), inline-block (horizontal arrangement or line wrapping) , none (not displayed), flex (flexbox layout) and grid (grid layout).

How to use display in CSS

What is the display attribute?

The display attribute controls how the element is displayed on the web page. It determines whether elements are displayed, how they are arranged, and how much space they take up.

Possible values ​​for the display attribute

The display attribute has the following possible values:

• inline: The element is in a horizontal line Arrange above without wrapping.
• block: The element occupies the entire line and wraps.
• inline-block: Elements can be arranged horizontally or wrapped.
• none: The element is not displayed.
• flex: Arrange elements according to flexbox layout rules.
• grid: Arrange elements according to grid layout rules.

Usage of display attribute

Using the display attribute, you can control how an element is displayed. For example:

<code class="css">#myElement {
  display: none;
}</code>

This will hide the element with id "myElement".

<code class="css">#myElement {
  display: flex;
}</code>

This will arrange the element with id "myElement" using flexbox layout.

Choose the correct display value

Choosing the correct display value depends on how you want the element to be displayed. The following are recommended values ​​in common scenarios:

• Text or link: inline
• Title or paragraph: block
• Button or image: inline-block
• Element to hide: none
• Flexible layout: flex
• Grid layout: grid

The above is the detailed content of How to use display in css. For more information, please follow other related articles on the PHP Chinese website!