What is the display CSS property and how to use it

The display property in CSS is used to set the type of display an element should have on the web page. It specifies the layout behavior of an element along with its visibility.

Syntax

selector {
  display: value;
}

The above syntax shows that to use the display property in CSS, we first need to select an element using a selector like class, ID, or tag name, and then set the display property to a specific value. The value can be any of the following:

  • block: This value is used to display an element as a block-level element, taking up the full width available, and starting from a new line.
  • inline: This value is used to display an element as an inline-level element, taking up only as much width as required, and not starting from a new line.
  • none: This value is used to hide an element completely by removing it from the page layout and visibility.
  • flex: This value is used to display an element as a flexible container that can be used to change the layout and alignment of its children.
  • grid: This value is used to display an element as a grid container that can be used to arrange its children in a grid layout.

Examples

Let’s see some examples of how the display property can be used in CSS:

// To display an element as a block-level element
p {
  display: block;
}

// To display an element as an inline-level element
span {
  display: inline;
}

// To hide an element completely
.hidden {
  display: none;
}

// To display an element as a flexible container
.container {
  display: flex;
}

// To display an element as a grid container
.container {
  display: grid;
}

These were just a few examples of how the display property can be used in CSS. To learn more about this property and its various values, check out MDN Web Docs.

  Written by: Maria Jensen     10-06-2023     Written in: CSS tutorials

8 Comments

  • Brooklyn says:

    Wow, this was really helpful! I’ve been struggling with understanding the display CSS property for quite a while now . This tutorial explained it in such a simple and clear way. Now I finally grasp its concept and know how to use it effectively. Thank you so much for sharing this!

  • Owen says:

    Wow, this article was a lifesaver! As a beginner in web development, I struggled a lot with understanding the display CSS property and how to use it effectively . The author broke it down into simple and concise explanations, making it easy for me to grasp the concept. The examples provided were incredibly helpful in showing the different ways the display property can be applied to elements. I love how this article emphasizes the importance of choosing the right display value to achieve the desired layout. Overall, a fantastic resource that I’ll definitely be revisiting whenever I need a refresher on the display property. Thanks a bunch!

  • Joshua says:

    This article is really helpful to mee . I always struggle with positioning my elements properly, but now I understand how to use the “display” CSS property correctly. It’s amazing how just a small change can make a huge difference in the layout of a webpage. Thank you for sharing this information!

  • Amelia says:

    This is very helpful! I never new about the display property before reading this article . Thank you for explaing it in such a simple way!

  • Damian says:

    I love using the display property in CSS to easily control how elements are shown on my webpage . This tutorial was super helpful in explaining all the different values and how to use them effectively. Can’t wait to start implementing these techniques on my own projects!

  • Hunter says:

    I really found this tutorial on the display CSS property very helpful! I was always confused about how to use it effectively in my projects, but this explanation cleared things up for me . Thanks for the helpful tips!

  • Sofia says:

    Wow, I never knew I could manipulate the display of elements with CSS like this! This tutorial was super helpful and really easy to follow . Thank you for sharing this information!

  • Ariana says:

    This is really helpful! I always struggled with formatting my display property in CSS, but this explanation really cleared things up for me . Thank you!

Leave a Reply

Your email address will not be published. Required fields are marked *