CSS CSS Tutorial CSS Advanced CSS Responsive Web Design(RWD) CSS Grid CSS Properties Sass Tutorial Sass Functions



CSS Display

CSS Display is a property that defines how an HTML element should be displayed on a web page. It is used to control the layout and positioning of elements on a page. The display property can be set to a variety of values, each of which has its own unique effect on the element.

The display property is one of the most important properties in CSS. It is used to control the layout and positioning of elements on a web page. The display property can be set to a variety of values, each of which has its own unique effect on the element. In this tutorial, we will explore the different values of the display property and how they can be used to create different layouts on a web page.

Values of the Display Property

The display property can be set to a variety of values, each of which has its own unique effect on the element. The most commonly used values of the display property are:

  • block
  • inline
  • inline-block
  • none

Block

The block value of the display property is used to create a block-level element. Block-level elements take up the full width of their parent container and are stacked vertically on top of each other. Examples of block-level elements include headings, paragraphs, and divs.

Example:

  
    <div style="display: block;">
      <p>This is a block-level element.</p>
    </div>
  

Inline

The inline value of the display property is used to create an inline-level element. Inline-level elements do not take up the full width of their parent container and are placed next to each other horizontally. Examples of inline-level elements include links, images, and spans.

Example:

  
    <span style="display: inline;">This is an inline-level element.</span>
  

Inline-Block

The inline-block value of the display property is used to create an element that is both inline and block-level. Inline-block elements take up only as much width as necessary and are placed next to each other horizontally. Examples of inline-block elements include buttons and input fields.

Example:

  
    <button style="display: inline-block;">Click Me</button>
  

None

The none value of the display property is used to hide an element from the web page. When an element is set to display: none, it is removed from the flow of the page and cannot be seen by the user. This value is often used in conjunction with JavaScript to show and hide elements based on user interactions.

Example:

  
    <div style="display: none;">
      <p>This element is hidden.</p>
    </div>
  

Conclusion

The display property is an important tool for controlling the layout and positioning of elements on a web page. By using the different values of the display property, you can create a variety of layouts and designs that are both functional and visually appealing.

References

Activity