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 [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.
<!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...
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...
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...
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...
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;
}
/*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...
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...
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
📌 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.
#second_paragraph{ display: none; }
After adding the CSS line above and saving your edit, you would have an output similar to this..
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
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 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...
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...
📌 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>
Next, 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
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...
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.
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...
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...
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
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...
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.
This documentation provides a deeper discussion of the subject if you are interested
Top comments (0)