CSS display property
Tags: webdev, beginners, css, html
Published: 2023-12-10 23:40:37

## What Is The CSS display property? 
The display property is a CSS property that is used to set how a particular HTML element should be displayed on the browser. This property can be used to Set:

- how both a container (for example a section element) and its content(s) (maybe div element(s) inside the parent section element) are displayed on the browser.

- Set an element to not be displayed on the browser at all.

This property can take one of several values, some of which this blog post would talk about in a minute. For now, please keep in mind that all HTML elements rendered on the browser have a default display value. For example, elements like section, p (paragraph) and div are set to **display:block** by default.

## CSS Syntax For Setting The Display Property 


![CSS syntax for setting the display property of an element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lm3z2zcqrcqzvzy6q8de.png)
The _[selector]_ could be an element such as a div, img, p (paragraph), an id or even a CSS class, and the _[value]_ could be any of the display property values.

## Display property values in CSS 

**block**- Displays an element as a block-level element. It starts on a new line and takes up the entire available width of it's container.
**inline**- Displays an element as an inline-level element. Any height and width settings will have no effect.
**inline-block**- Displays an element as an inline-level element. Additionally, height and width settings will have effect.
**none**- The element is completely removed from the browser's display.
flex- Displays an element as a block-level flex-container.
**inline-flex**	Displays an element as a inline-level flex-container.
**grid**- Displays an element as a block-level grid container.
**inline-grid**- Displays an element as an inline-level grid container.
**inherit**- sets the display property value of the element to that of its parent element.
**initial**- sets the elements display property to it's default value.

We would make use of the following HTML code to illustrate each one of the display properties discussed in this article.

```HTML
<!DOCTYPE html>

<html lang="en">
  <head>
    <title>Css display property</title>
  </head>

  <body>
    <p>Hi there, welcome to learn web dev.</p>

    <p id="second_paragraph">
      In this article, i hope to help you understand what the
      <span>CSS</span> display property is, some of the values it can take, and
      how you can use it in your next website project
    </p>
  </body>
</html>
```
Simply save this code and load it on your favorite browser. The output would be similar to the output on the image shown below...

![Output of HTML code containing 3 paragraphs and a span element](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/205cgjnwitgr5a467597.png)

### Display:block
**block** is one of the most common display property values in CSS. An element with it’s display property set to block starts on a new line and takes up the full width available in its container element. Consequently, any other element after it would be displayed in a new line. Additionally, you can set the width and height of elements set to **`display:block.`**

A key note about elements set to **`display:block`** is that when you set the width of the element to be smaller than that of the container, the element immediately after it would still be displayed in a new line.

As mentioned earlier, elements such as div, section, p are set to **`display:block`** by default.

You can use **`display:block`** when you want the element to take up the entire available width of its container.

As an example, let's set the `<span>` element in our HTML code to **`display:block`**. To do this, we simply select the element in our CSS and define the CSS display property value to be **block** as done in the CSS code snippet below...

```css

span { 
  display: block; 
  border:1px solid lightblue; 
}
/*this second line isn't neccessary i only 
added this to make the span more noticable */

```
After setting , save your CSS code and refresh your browser. You should get an output similar to the output on the image shown below...

![output of HTML code containing 3 paragraph elements and a blue-bordered span element set to display-block](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/upb90qjggam6eq79h18k.png)
Notice from the output that the `<span>` element is now displayed on a new line and it takes up the entire available width. Now let 's set the height and width of the span element. 
Now, let's see what happens when we set the width and height...

```css

span { 
  display: block;
  border:1px solid lightblue; 
  height: 40px;
  width:50px; 
}
 /*the second line isn't neccessary i only added this to
  make the span more noticable */ 

```
the output...

![output of HTML code containing 3 paragraph elements and a blue-bordered span element set to display-block, having height and width of 50px](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s9erk0g2nb55dta9bzc9.png)

Notice from the output that even when we set the width of the element to be smaller than that of it's parent container, it still forces the text after it to be displayed in a new line.

### Display:inline
An element set to **`display:inline`** doesn’t take up the entire available width. It takes up only the amount of width given it by default. Setting the width and height of such elements have no effect.

Elements such as span, img, a (anchor), are set to **`display:inline`** by default.

let's see an example. Using the `<span>` element we used earlier, let's set the display back to `display:inline` in our CSS code.

```css
     
span { 
  display: inline;
  border:1px solid lightblue; height: 40px; width:50px;
}
 /*the border is not neccassary. I only added it 
to make the span element more visible */

```
Save your edit and refresh your browser. You would get an output similar to this...

![output of HTML code containing 3 paragraph elements and a blue-bordered span element set to display-inline](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/inx9uw1byl6aviqo1j06.png)
When you increase or reduce the height and width of the span element, you would notice that there is no effect at all.
As mentioned earlier, the span element is set to **`display:inline`** by default. That means you don't have to explicitly specify it in your CSS. 
You use **`display:inline`** when you want the element to be displayed as an inline element.

#### 📌 Did you notice the differences between display block and display inline?
 An element set to **`display:block`** is displayed in a new line and takes up the entire width of its container. On the other hand, an element set to **`display:inline`** doesn’t start in a new line and takes up only the needed width and height. Also, you can set the width and height of elements set to **`display:block`**, while you cant set the width and height of elements set **`display:inline`**

### Display:inline-block
Elements set to **`display:inline-block`** are displayed as inline elements, that is, they do not start in a new line. Additionally, you can set the width and height of such elements. So, just as the value name suggests, we get the benefits of both inline and block level elements.
let's see an example. Set the span element to **`display:inline-block `** in your CSS...

```css

span { 
  display: inline-block; 
  border:1px solid lightblue; height: 40px; width:50px;
}
 /*the border is not neccassary. I only added it 
to make the span element more visible */
  

```css
Save and refresh your browser. You should get an output similar to the one shown in the image below 



![output of HTML code containing 3 paragraph elements and a blue-bordered span element set to display-inline having a width and height of 50px ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w9m5czbd35hdvgltjogv.png)

#### 📌 Did you notice the difference between **`display:inline-block`** and **`display:inline`**? 
While both display values would cause an element to be displayed as an inline element, **`display:inline-block`** also gives the advantage of  being able to set the width and height of the element. On the other hand, width and height settings have no effect on elements set to **`display:inline`**.

### Display:none
When an element is set to **`display:none`**, the element is completely removed from the page. This complete removal means,

- 
the page would be displayed as though the element does not exist,

- 
if the element is a parent element, it’s children would also be removed from the page, and

- 
the element would not be accessible to screen readers. 

For an example, let's set the display of the second paragraph to none. 

```css
 #second_paragraph{ display: none; }
```
After adding the CSS line above and saving your edit, you would have an output similar to this..

![a paragraph along with it's span child element removed from the browser's display after setting the element to display:block](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k49aesh02dnqv2tgudq1.png)

Notice that both the paragraph and its child element (span) are completely removed from the page.

There is another CSS property and value you can use to prevent an element from being displayed on the page, that property and value is **`visibility:hidden`**. let's talk very briefly about the differences.

#### `Display:none` vs `visibility:hidden`-what is the difference?

While both **`display:none`** and **`visibility:hidden`**
would prevent an element from being displayed on the page, both properties do not have exactly the same effect. Setting an element to **`display:none`** would cause the element to be completely removed from the browser's display of the page. The page would be displayed as though the element never existed. This also makes the element inaccessible to screen readers. On the other hand, setting an element to **`visibility:hidden`** would cause the element to take up the space it would normally take but without displaying anything. 

The image below shows the effect of using **`visibility:hidden`** on the span in place of **`display:none`**


![Output of HTML code containing a div having 2 paragraph children element with the second paragraph element containing a span elemnent set to visibility hidden](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ys289yh9erl1af76isdl.png)

You use display none when you want the element to be completely removed from the display.

### Display:flex
When an element is set to **`display:flex`**, the element is displayed as a block-level flex-container. This means the element would be displayed on a new line and also take up the entire width of its parent container. Additionally, the children of the element become flex-items. These flex-items can shrink or grow to fit the flex-container (the parent element that has being set to **`display:flex`**) . Additionally, flex-items can easily be aligned within the container. This feature of the flex layout system and more makes it easy to design a responsive layout for our web pages. if you'd like to, you can learn more about [the CSS flexbox layout](https://www.w3schools.com/css/css3_flexbox.asp) here.

let's update our CSS styles to get a practical view of this display property.

Please delete the earlier styling we added for the second paragraph (the styling with the `#second_paragraph`). Now update your CSS with the following lines...

```css

body{ 
  border: 1px solid purple; 
  padding:5px; 
  display:flex; 
  } 
p{ 
  padding:10px; 
  border:1px solid rgb(180, 79, 180); 
} 
 /*border is added
  make the span more 
    noticable */
```
Save your update and refresh your browser. You would get an output similar to this...


![A body element containing 2 paragraphs is set to display "flex"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/quloyvrqii8jnv2jt3al.png)

#### 📌 Display:block vs Display:flex- What is the difference?
Both **`display:block`** and **`display:flex`** would cause an element to be displayed on a new line and take up the entire available width of it's container. The difference is that **`display:flex`** causes its children or child element to be displayed using the flex-layout.

### Display:inline-flex
An element set to **`display:inline-flex`** is displayed just as an element set to **`display:flex`** but with just one difference. The difference is , this time, the element is displayed as an inline-level element as opposed to block.  In other words the element only takes up the needed width and height or the user-defined width and height, and its children are displayed using the flex-layout.

let's see an example. First though, let's update our HTML code a bit...

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Css display property</title>
  </head>

  <body>
    <div>
      <p>Hi there, welcome to learn web dev.</p>
      <p id="second_paragraph">
        In this article, i hope to help you understand what the
        <span>CSS</span> display property is, some of the values it can take,
        and how you can use it in your next website project
      </p>
    </div>

    <span>hi there</span>
  </body>
</html>
```
Next, let's update ours CSS to style the `div` we just added

```css
div{ 
  border: 1px solid purple; 
  padding:5px; 
  display:inline-flex; 
  width:50%; 
  } 
p{ 
  padding:10px; 
  border:1px solid rgb(180, 79, 180); 
 } 
 /*border is added
  make the span more 
    noticable */

```
Save and refresh your browser. You should get an output similar to the one shown in the image below

![A body element containing 2 paragraphs is set to display "inline-flex"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/euel7uq6f94uopujgggs.png)


### Display:grid
An element set to **`display:grid`**  is displayed as a block-level element (that is, it is displayed in a new line and takes up the entire width of it’s container element) while it’s contents are displayed using the grid-layout. The grid layout is a layout in which elements are displayed using rows and columns. 

let's see an example. let's set the display type of the `div` element in our CSS to `grid ` 

```css
div{ 
  border: 1px solid purple; 
  padding:5px; 
  display:grid; 
  grid-template-columns:50% 50%; 
  grid-template-rows:100%;  
} 
p{ 
  padding:10px; 
  border:1px solid rgb(180, 79, 180); 
} 
 /*border is added
  make the span more 
    noticable */

    
```
Save your edit and refresh your browser. you  would get an output similar to this...

![A div element containing 2 paragraphs is set to display "inline-flex"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uwwc2q90kkntu3igb6he.png)

The grid-layout is another fine tool to help you easily create responsive layouts for your web pages. If you'd like to, you can learn more about the [CSS grid layout here](https://www.w3schools.com/css/css_grid.asp).

### Display:inline-grid
An element set to **`display:inline-grid`** is displayed just as an element set to **`display:grid`** but with just one difference. The difference is, this time, the element is displayed as an inline-level element as opposed to block. In other words the element only takes up the needed width and its children are displayed using the grid layout.

lets see an example. Update your CSS...

```css

div{ 
  border: 1px solid purple; 
  padding:5px; 
  display:inline-grid; /*changed this to inline-grid*/
  width:50%; 
  grid-template-columns: 50% 50%; 
  grid-template-rows: 100%; 
} 
p{ 
  padding:10px; 
  border:1px solid rgb(180, 79, 180); 
} 
 /*border is added
  make the span more 
    noticable */

```
Save and refresh your browser. you would have an output similar to this...

![A div element containing 2 paragraphs is set to display "inline-grid"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wmde1kwzhzhv9254sz80.png)

Notice that the grid container no longer takes up the entire width like a block element would. it is now being displayed as an inline element while at the same time giving us the opportunity to adjust it's width and height. Also, notice too that the span element we added after the div is an inline element. So it can be displayed along the same line as the inline-grid element instead of starting in a new line like a block element would. 

### Display:inherit
An element set to **`display:inherit`**  inherits the display property and value of it’s parent element. If the parent element is set to **`display:block`**, a direct child element set to **`display:inherit`** would then be displayed as a block-level element.

let's see an example. We know that by default the p (paragraph) element is set to **`display:block`**. let's set the span of the second paragraph to **`display:inherit`**. First though, let's reset our `div` so that the output is easier to comprehend.

```css
div{ 
  border: 1px solid purple; 
  padding:5px; 
} 
p{ 
  padding:10px; 
  border:1px solid rgb(180, 79, 180); 
}

```
Save your code and refresh your browser. You should have a similar output as the one shown in the image below...


![A purple-bordered div element containing 2 purple-bordered paragraphs ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yvn53rfpjml57a77fqif.png)

Now, let's set the span to display:inherit

```css
span{

  display: inherit; 
  border:1px solid rgb(216, 196, 216);
  
 /*border is added
  make the span more 
    noticable */ 
}
```
Save your CSS update and refresh your browser. You should have an output similar to the one shown in the image below


![A span element with css display property set to  "inherit"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/upxb661dva7k3iolodqc.png)

Notice that both span elements are taking up the entire available width of their respective containers. The first span element inherited **`display:block`** from it's parent `div` element, while the second span element inherited  **`display:block`** from the `body` element (which is it's parent).

### Display:initial
An element set to **`display:initial `** is displayed using its default display value.

let's see one final example. let's set the span element to **`display:initial`**.

```css

div{ 
  border: 1px solid purple; padding:5px; 
} 
p{ 
  padding:10px; 
  border:1px solid rgb(180, 79, 180); 
} 
span{ 
  display: initial; 
  border:1px solid rgb(216, 196, 216); 
} 
 /*border is added
  make the span more 
    noticable */
```
Save and refresh your browser, you should get an output similar to the one shown in  the image below...


![A span element with css display property set to  "initial"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cq8iul8u4lc3gvgif0av.png)

## Conclusion
Having a good understanding of the display properties available in CSS would equip you to build your website's interface just as you would love it to be. This article has discussed briefly 10 of the most common CSS display property values needed for building both responsive and beautiful looking layouts. Please feel free to use this article as quick reference on each of this display property values whenever you need to. 

Thank you for reading till the end.

### Check out these helpful links to learn more about the CSS display property and it's values.

[Css display property](https://www.w3schools.com/cssref/pr_class_display.php)

[This documentation provides a deeper discussion of the subject if you are interested](https://developer.mozilla.org/en-US/docs/Web/CSS/display)