Css display property

 

Article image


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  

The image below shows how to set the display property of an element in CSS.

Syntax for setting the css display property
Syntax for setting the display property of an element

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 


CSS display property values
Value Description
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.


<!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


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...

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


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. 


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

Output of HTML and css code



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.


span {
  display: inline;
  border:1px solid lightblue; height: 40px; width:50px;
}
 /*border is added
  make the span more
    noticable */

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

Output of HTML and css code



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 difference 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.


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.

span {
  display: inline-block;
  border:1px solid lightblue; height: 40px; width:50px;
}
 /*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 


Output of HTML and CSS code



📌 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 by screen readers. 

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

#second_paragraph{ display: none; }


After adding the CSS line above and saving your edit, you would have an output similar to this...

Output of HTML and CSS code


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 this the effect of using visibility:hidden on the span in place of display:none

Output of HTML and CSS code



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 make it easy to design a responsive layout for our web pages. You can view this article to learn more about the CSS flexbox. 

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 id second_paragraph). Now update your CSS with the following lines...


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...


Output of HTML and CSS code








📌 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...

<!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>



Then let's update ours CSS to style the div we just added

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


Output of HTML and CSS code








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


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...


Output of HTML and CSS code







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 grid layout here.


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.


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...

Output of HTML and CSS code


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.


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...


Output of HTML and CSS


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

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 .


Output of HTML and CSS code


 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.

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...

Output of HTML and CSS code



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 to the end. 

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

Css display property

This documentation provides a deeper discussion of the subject if you are interested

Comments

Post a Comment

Popular posts from this blog

What is flexbox?

Image
  Flexbox might seem challenging when you first come across it, but truly it doesn't have to be.  The aim of this article is to help you win the flexbox challenge. let's do this together, shall we? What is flexbox? Flexbox is a way to arrange items into rows or columns. These items will flex, that is, grow or shrink based on some simple rules that you can set in your CSS. Flexbox is not just a single CSS property, but a whole toolbox of properties that you can use to put things where you need them. Some of these properties belong on the flex container , while some go on the flex items . This amazing toolbox can help you create beautifully structured layouts for your web pages. Flexbox gives us complete control over the alignment, direction, order and size of our flex-items. Alright, at this point you might be wondering, “what is a flex container?”, and maybe also “what is a flex item?”. Please don’t worry too much, we are going to take everything one step at a time. S
Read more