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

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.

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:

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

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:

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

li {
    display: inline;
}

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

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.

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

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:

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

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:

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