It’s Festive Season! Enjoy 30% Off

Use code FESTIVE30 at checkout

Code has been added to clipboard!

The Use of CSS Display: Inline, Block and Hidden Elements

Reading time 4 min
Published Nov 3, 2016
Updated Oct 2, 2019

TL;DR — The CSS display property controls the way HTML elements are presented on web pages.

Inline and Block Elements

HTML elements divide into two major categories: block-like and inline elements.

Block-like elements (<div>, <p>, <h1>, etc.) always stretch out as far to the sides as possible and start on a new line.

The <div> element is a block-level element.

 

Inline elements (<span>, <img>, <a>, etc.) only take the space that is necessary. They don't have to start on a new line.

The Use of the display Property

By using the CSS display property, you can specify manually what kind of container the element should use:

Example
p.inline {       
  display: inline;   /*makes the <p> element, which is a block level element by default, display as an inline element if the "inline" class is assigned to it.*/
}

The syntax is rather intuitive:

display: value;

In the table below, you can see all the available values. Three most common ones will be discussed separately in the following sections.

Property Values

Value Description
none The element is not displayed
inline The element stays in the same line and only takes up the width of its content
block The element starts in a new line and takes up the whole available width
inline-block The element is displayed as an inline element but can be styled as a block level element
table The element is displayed as a table type element
flex The element is displayed as a block level flex element
inline-flex The element is displayed as an inline flex element
inline-table The element is displayed as a inline table element
run-in The element is displayed as the first inline child of a block element

inline

Here are a few characteristics of elements set to display: inline:

  • Elements only take the necessary space.
  • They also appear next to each other on the same line.
  • One disadvantage is that you can't control the height and width properties of inline elements.
  • The display: inline disregards the padding and margin settings.
  • Can have only inline elements.

This example shows how several <span> elements appear in the same line:

Example
<span style="background-color: red;">I am one element.</span>
<span style="background-color: blue;">I am the second element.</span>
<span style="background-color: green;">I am the third element.</span>
<span>We are all in the same line!</span>

It is also possible to make block elements appear in one line by setting the display: inline. This example overrides the default settings of <li> bullet points and presents them in one line:

Example
li {
    display: inline;
}

The same overriding of default settings happens to this <span> element:

Example
span {
   display: block;
}

block

Here are the characteristics of block elements:

  • Elements take the largest possible width.
  • Every block element appears in a new line.
  • Elements react to width and height properties.
  • Elements can contain both inline and block elements.
Example
<div style="background-color: red;">I am one element.</div>
<div style="background-color: blue;">I am the second element.</div>
<div style="background-color: green;">I am the third element.</div>
<div>We are all in separate lines!</span>

inline-block

The CSS display: inline-block is a combination of both inline and block-level features. The main difference is that inline-block responds to width and height properties.

Example
div {
  display: inline-block;
  height: 100px;
  width: 100px;
  background: red;
  color: white;
  padding: 6px;
  margin: 3px;
}

This feature makes the CSS display: inline-block more suitable for creating layouts. One of the more popular ways of using inline-block elements is creating horizontal navigation menus.

Here is another example of the use of display: inline-block:

Example
.float-box {
    display: inline-block;
    width: 200px;
    height: 100px;
    margin: 20px;
    border: 5px solid black; 
}

Hiding Elements: display or visibility

There is a difference in using visibility: hidden and display: none. In the following example, we hide an element with the display: none.

Example
div {
background-color: red;
color: white;
display: inline;
padding: 6px;
margin: 5px;
}
.hid {
display: none;
}

The <div> set to display: none completely disappears from the page. The next <div> fills its place, leaving no empty space.

This is the main difference in display: none vs visibility: hidden. The visibility property keeps the element but makes it invisible:

Example
div {
background-color: red;
color: white;
display: inline;
padding: 6px;
margin: 5px;
}
.hid {
visibility: hidden;
}