How to use display in css

The display attribute is used to specify the layout behavior of the element. There are multiple values ​​to choose from, including block, inline, inline-block, none, flex and grid. Using the display property, you can set the display of an element as a block element, inline element, or other formatting by specifying a value in a CSS style sheet. For example, display: block; displays the element as a block-level element.

Usage of display in CSS

What is the display attribute?

The display attribute is used to define the layout behavior of an element on the page. It specifies how the element is displayed as a block element, an inline element, or other formats. Values ​​for

display The

display property accepts the following values:

• block - The element is displayed as a block-level element , taking up the entire available width and starting on a new line.
• inline - The element is displayed as an inline element and does not wrap on the same line as other elements.
• inline-block - Combines the features of block and inline, allowing an element to take up width but still be displayed with other elements within the same line.
• none - The element does not appear on the page.
• flex - Makes the element a container for flexbox layout.
• grid - Makes the element a container for grid layout.

How to use the display attribute?

Use the display attribute in a CSS style sheet with the following syntax:

<code class="css">selector {
  display: value;
}</code>

For example:

<code class="css">p {
  display: block;
}</code>

This will cause all paragraph elements to be displayed as block-level elements.

Usage examples of the display attribute

• Display the title element as a block-level element:

  <code class="css">h1 {
  display: block;
  }</code>

  Copy after login

• Display hyperlinks as inline elements:

  <code class="css">a {
  display: inline;
  }</code>

  Copy after login

• Create buttons that both fill the width and line up with other elements:

  <code class="css">button {
  display: inline-block;
  }</code>

  Copy after login

• Hide page Elements on:

  <code class="css">#my-element {
  display: none;
  }</code>

  Copy after login

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!