CSS Display

Some of the Front End Developers especially those who are beginners, complain that some of the elements starts in a new line while some continues with the flow of text. Why is it so?

It is because they do not know the display property which is really important.

The display property decides how the browser will display an element.

There are 5 important display properties –

inline
block
inline-block
none
table

There are other display properties like contents, flex, grid etc which are covered in detail in their respective articles.

1. Display Inline

As the name suggests, the inline elements are those which continues with the flow of the text.

These elements continues inline with the flow
The inline elements does not start in the new line until you are forcing it to start in a new line in other ways
Inline elements occupy a limited amount of space which is required
For inline elements, the browsers do not accept the width and height values.

The Syntax of Display Inline :
display: inline;

Some of the elements which are inline elements are-

<span>
<img> – It behaves like inline-block which is discussed below
<a>
<b>
<strong>
<em>
<input> – This is the input tag for the Input Form fields

We have just added display: inline to show the example. In actual project, you can skip coding this for inline elements.

The best way to use the display: inline property is – when you want to override an element which is not an inline element.

Example of Display Inline

span { 
 margin:5px;
 display:inline;
}

Note/Info/Success Here, we have set the width and height values intentionally just to show that it is not going to make any difference for inline elements.
Remove the width and height values and you will notice no difference in the output.

2. Display Block

The block elements are those which breaks the normal flow of the text & starts in a new line.

The block elements starts in the new line until you are forcing it to be inline in some ways
block elements occupy the maximum available full space
For most of the block elements, the browsers accepts the width and height values and you can set them accordingly.

The Syntax of Display Block :
display: block;

Some of the elements which are block elements are-

<header>
<div>
<section>
<ul>
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
<p>
<form>
<footer>
<ul>

So, there is no need to define these elements as display:block as they are already block elements, although you can still code it if you want.

The best way to use the display:block property is – when you want to override an element which is not a block element.

Example of Display Block

div { 
 width:50px;
 margin:5px;
 height:50px;
 display:block;
 text-align:center;
 background:hotpink;
 border:2px solid black;
}

3. Display inline-block

The inline-block elements have some behavior similar to inline elements in a way that it continues with the flow of the text but it is little different from inline elements in a way that you can set the width and height values for inline-block elements similar to the way in which you can do it for block elements.

Unlike block elements, this does not break into a new line, rather flows normally.

The Syntax of Display inline-block :
display: inline-block;

The advantage of setting the inline-block property for an element is that you can create a horizontal navigation bar easily as all elements will be in the same line and you have extra option to set width and height property.

Example of Display inline-block

img { 
  width:200px;
  margin:5px;
  height:200px;
  display:inline-block;
}

Let us compare the result of display: inline with display:inline-block.

Example for Display Inline VS Inline Block

.val1 { 
 width:50px;
 margin:5px;
 height:50px;
 padding:10px;
 display:inline;
 text-align:center;
 background:#398CFE;
 border:2px solid black;
}
.val2 { 
 width:50px;
 margin:5px;
 height:50px;
 padding:10px;
 display:inline-block;
 text-align:center;
 background:#398CFE;
 border:2px solid black;
}

Similarly, we will compare the result of display:inline with display:block.

Example of Display Inline VS Block

.navbar { 
 text-decoration:none;
 width:400px;
 display:inline;
 padding:10px;
 font-size:20px;
 color:white;
 background:crimson;
}

.navbar1 { 
 text-decoration:none;
 width:400px;
 display:block;
 padding:10px;
 font-size:20px;
 color:white;
 background:crimson;
}

4. Display None

The display property none hides an element as well as remove the space allocated for the element.

The Syntax of Display None:
display: none;

display: none VS visibility: hidden

display:none makes sure that the element is not displayed. It also removes the allocated space for the element.

visibility:hidden hides the element but it does not remove the extra space of the element which is hidden.

So, if you want to keep the extra space, then use visibility:hidden else use display:none property.

Example of Display VS Visibility

.display-hidden {
 visibility: hidden;
}

.display-none {
 font-size:20px;
 display: none;
}

5. Display Table

The properties –

display: table – Enables an element to behave like a Table (similar to the element <table>)
display: table-column – Enables an element to behave like the column of the Table (similar to the element <col>)
display: table-row – Enables an element to behave like the row of the Table (similar to the element <tr>)
display: table-column-group – Enables an element to behave like the group of columns of the Table (similar to the element <colgroup>)
display: table-row-group – Enables an element to behave like the group of rows of the Table (similar to the element <tbody>)
display: table-header-group – Enables an element to behave like the header of the Table (similar to the element <thead>)
display: table-footer-group – Enables an element to behave like the footer of the Table (similar to the element <tfoot>)
display: table-cell – Enables an element to behave like the cell of the Table(similar to the element <td>)
display: table-caption – Enables an element to behave like the caption of the Table(similar to the element <caption>)

Example of Display Table

.mainsection {
 display: table;
}

p {
 margin: 0;
 border: 1px solid gray;
 padding: 5px 10px 5px 10px;
}

Display Contents

The display:contents enables the Text content to display while the container containing it will disappear.

The Syntax of Display Contents:
display: contents;

Example of Display Contents

.main-display {
 border:2px solid green;
 background:green ;
 padding:20px;
 width:300px;
 display:contents;
}

.contents-val {
 padding:5px;
 background:gold;
 border:2px solid black;
}

Display Flex

To create 1 Dimensional layout of your website, you can use Flex.

To display the parent Container as flex, you must code display: flex in the Parent container.

Do not worry about Flex if you are a beginner. As Flex in itself is a very important topic, we have discussed this in detail here.

Example of Display Flex

.div-flex {
 display:flex;
}

.flex-val {
 padding:5px;
 background:deepskyblue;
 border:2px solid black;
}

Display Grid

To create 2 Dimensional layouts of your website, you can use Grid.

To display the parent Container as Grid, you must code display: grid in the Parent container.

As Grid in itself is a very important topic, we have discussed this in detail here.

Example for Display Grid

.maindiv {
 display:grid;
}

.div-val {
 padding: 5px;
 background:gold;
 border:2px solid black;
}