A lot more goes into styling web pages than colors and fonts. Even the simplest web pages need layout rules to look good, which requires knowledge of CSS properties like position, float, and the subject of this post, the display property.

If you’re building a website from scratch or learning to program in HTML, these properties are fundamental. While it’s easy at first to improvise your CSS code as you go along, you’ll end up spending a lot of time fixing CSS glitches down the road.

Trust me — I’ve written a lot of CSS without knowing exactly what I was doing, and I’ve learned it’s better to understand what CSS rules do instead of just winging it.

Plus, even if you’re not an aspiring web developer, having basic knowledge of CSS properties like display will enable you to make small tweaks to your site’s look if necessary — no need to reach out to a developer to do it for you.

To help you out, this guide will explain what the CSS display property does and what it can add to your CSS toolkit. I’ll cover the most common uses of the property, along with visual examples.

Free Intro Guide to HTML & CSS [Download Now]

What is the CSS display property?

Every HTML element is represented by a box that contains content and determines the amount of spacing around the content. The CSS display property specifies how this box appears on the web page relative to other elements, as well as the behavior of its child elements (i.e. the elements inside it).

In CSS there are two “levels” this box can adopt: block and inline. Block-level elements exist on their own line and span the entire width of the page unless another width is specified. <div> and <p> are examples of block-level elements.

Inline-level elements do not break the flow of content — multiple inline elements can exist on the same line. <span>, <b>, and <a> are inline-level elements.

The display property targets these levels and lets us change them for our styling needs. A display rule is written like so:

display: value;

...where value specifies the way the element appears — in other words, its level. Let’s now look at the most common values of the display property.

CSS Display Values

By default, browsers render certain elements on different levels. For example, <div> elements are rendered as blocks by default, while <span> elements appear inline by default, as demonstrated below:

 
<body>

<div id="div-0"> This is my first div.</div>

<div id="div-1"> This is my second div.</div>

<div id="div-2"> This is my third div.</div>

<br>

<span id="span-0">This is my first span.</span>

<span id="span-1">This is my second span.</span>

<span id="span-2">This is my third span.</span>

</body>

<style type="text/css">

body { font-family: "Avenir Heavy"; }

div, span {

background-color: #2e3f50;

padding: 10px;

border-radius: 5px;

}

div { color: #fd8f59; }

span { color: #1ebda5; }

</style>

visual example of the default levels of div and span HTML elements

Here, the first three <div> elements are blocks — each spans the width of the page and begins on a new line. The following three <span> elements all exist on the same line, and their widths and heights are determined by the text inside them (as well as some extra padding I added).

The display property can override these default display types. So, let’s take this example and see what changes when we apply various display rules.

CSS Display: inline

The inline display value turns any element into an inline element. These elements will appear on the same line without breaks, like <span> elements behave.

 
<body>

<div id="div-0"> This is my first div.</div>

<div id="div-1"> This is my second div.</div>

<div id="div-2"> This is my third div.</div>

<br>

<span id="span-0">This is my first span.</span>

<span id="span-1">This is my second span.</span>

<span id="span-2">This is my third span.</span>

</body>

<style type="text/css">

body { font-family: "Avenir Heavy"; }

div, span {

background-color: #2e3f50;

border-radius: 5px;

display: inline;

}

div { color: #fd8f59; }

span { color: #1ebda5; }

</style>

visual example of the CSS display property inline

Note that I removed the padding rule to better illustrate the effect of inline. Also, The width and height of inline elements are determined by the content they contain. You can’t set their widths and heights with CSS:

If we add text between our <div> elements, we clearly see how they fit within a line:

visual example of the CSS display property inline

CSS Display: block

The block display value makes an element a block element. Block elements start a new line and span the entire width of the viewport by default, like how <div> elements behave. There are also line breaks before and after these elements.

 
<body>

<div id="div-0"> This is my first div.</div>

<div id="div-1"> This is my second div.</div>

<div id="div-2"> This is my third div.</div>

<br>

<span id="span-0">This is my first span.</span>

<span id="span-1">This is my second span.</span>

<span id="span-2">This is my third span.</span>

</body>

<style>

body { font-family: "Avenir Heavy"; }

div, span {

background-color: #2e3f50;

padding: 10px;

border-radius: 5px;

display: block;

}

div { color: #fd8f59; }

span { color: #1ebda5; }

</style>

visual example of the CSS display property block

CSS Display: inline-block

The inline-block value is a hybrid of inline and block. Elements assigned display: inline-block appear on the same line with other inline elements, a characteristic of inline elements. However, inline-block elements are also like block elements in that you can change their widths and heights with CSS.

 
<body>

<div id="div-0"> This is my first div.</div>

<div id="div-1"> This is my second div.</div>

<div id="div-2"> This is my third div.</div>

<br>

<span id="span-0">This is my first span.</span>

<span id="span-1">This is my second span.</span>

<span id="span-2">This is my third span.</span>

</body>

<style>

body { font-family: "Avenir Heavy"; }

div, span {

background-color: #2e3f50;

padding: 10px;

border-radius: 5px;

display: inline-block;

width: 200px;

height: 50px;

}

div { color: #fd8f59; }

span { color: #1ebda5; }

</style>

visual example of the CSS display property inline-block

CSS Display: list-item

Elements assigned display: list-item behave like <li> elements. The entire element becomes a block-level element, the text inside becomes its own inline element, and a bullet point is added to the left:

 
<body>

<div id="div-0"> This is my first div.</div>

<div id="div-1"> This is my second div.</div>

<div id="div-2"> This is my third div.</div>

<br>

<span id="span-0">This is my first span.</span>

<span id="span-1">This is my second span.</span>

<span id="span-2">This is my third span.</span>

</body>

<style>

body { font-family: "Avenir Heavy"; }

div, span {

background-color: #2e3f50;

padding: 10px;

border-radius: 5px;

display: list-item;

margin-left: 30px;

}

div { color: #fd8f59; }

span { color: #1ebda5; }

</style>

visual example of the CSS display property list-item

Note that without the rule margin-left: 30px; our bullet points would fall outside the viewport. I increased the left margin to make them visible.

Add the rule list-style-position: inside; to place the bullets inside the list item element:

visual example of the CSS display property list-item

CSS Display: none

display: none removes the targeted element (and all its child elements) from the page. This causes accompanying elements to behave as if this element does not exist. In this example, display: none is applied to the second <div> and the second <span>:

 
<body>

<div id="div-0"> This is my first div.</div>

<div id="div-1"> This is my second div.</div>

<div id="div-2"> This is my third div.</div>

<br>

<span id="span-0">This is my first span.</span>

<span id="span-1">This is my second span.</span>

<span id="span-2">This is my third span.</span>

</body>

<style>

body { font-family: "Avenir Heavy"; }

div, span {

background-color: #2e3f50;

padding: 10px;

border-radius: 5px;

}

div { color: #fd8f59; }

span { color: #1ebda5; }

#div-1, #span-1 {

display: none;

}

</style>

visual example of the CSS display property none

To hide an element without affecting page layout, use the CSS visibility property instead:

 
/* display: none; */

visibility: hidden;

visual example of the CSS visibility property hidden

CSS Display: grid

The grid display value makes the assigned element a grid container, and its child elements behave as grid items. Learn how to make CSS grids in our in-depth guide.

CSS Display: flex

Finally, the flex display value sets an element as a flex container, another way to build pages dynamic and responsive elements. You learn more about this CSS module in the blog post Here's the Difference Between Flexbox, CSS Grid & Bootstrap.

Change Up Your Layouts With the Display Property

The display property allows you to define the appearance of page elements outside of their default settings. This is a powerful capability, and most modern web pages — including those build with Bootstrap CSS — make use of it to some extent. So, even a basic knowledge of display can help us grasp what happens behind the scenes in web pages. There’s more going on than most realize.

New Call-to-action

 css introduction

Originally published Nov 23, 2020 10:41:16 AM, updated January 12 2021

Topics:

Bootstrap & CSS