Today we will discuss about the CSS display property and what value should be used for it and when.

Let’s first have a look at the CSS display property.

What is the CSS display property?

Well, according to w3schools

The display property specifies the type of box used for an HTML element.

Well, in simple terms this means that using this CSS property we cant control the layout of an HTML element(or its rectangular box to be precise). The most common values for the display property are:

display:block;				/*Sits in the next line*/
display:inline;				/*Sits in the same line*/
display:inline-block;		/*Combines both block and inline*/
display:none;				/*Used to hide the element*/

display:block; /*Sits in the next line*/

display:inline; /*Sits in the same line*/

display:inline-block; /*Combines both block and inline*/

display:none; /*Used to hide the element*/

Display:block;

A block-level element starts on a new line and takes up as much horizontal space as it can. For example: The User Agent stylesheet sets some elements as block level elements like h1,div,p etc. Consider this piece of code:

Some text here.<span style="display:block;color:rgb(255, 0, 31);">Notice this text on the next line.</span>Some more text!!

1	Some text here.<span style="display:block;color:rgb(255, 0, 31);">Notice this text on the next line.</span>Some more text!!

DEMO

Some text here.Notice this text on the next line.Some more text!!

Now, span is an inline element by default but we specified that we wanted it to act as a block-level element in CSS, so it appears in the next line. You can specify the width/height of block elements and even if the width is smaller than the width of the document, it will be rendered on a new line and no following elements will be rendered on that line.

Display:inline;

This is the default value for every element. An inline element sits in the same line, i.e. it doesn’t force itself to be in the next line.You can not set the width/height of these elements, they will take only as much space as is required to fit the contents of the element. For example:

Some text here. <h1 style="display:inline;width:1024px;" >Notice this on the same line.</h1> Some more text here!!

1	Some text here. <h1 style="display:inline;width:1024px;" >Notice this on the same line.</h1> Some more text here!!

The above code will render the following:

DEMO

Some text here.

Notice this on the same line.

Some more text here!!

Display:inline-block;

As the name suggests, this property-value combines the best of both display:block; and display:inline-block;. An inline-block element will be rendered on the same line and you can even specify the width/height etc for such elements. This is perfect for making grid-like designs. For example:

<label style="width:100px;display:inline-block;" >Small:</label><input type="text" /><br>
<label style="width:100px;display:inline-block;" >Big ass label:</label><input type="text" />

1 2	<label style="width:100px;display:inline-block;" >Small:</label><input type="text" /><br> <label style="width:100px;display:inline-block;" >Big ass label:</label><input type="text" />

The above shall render:

DEMO

Small:
Big ass label:

Display:none;

This is pretty simple, if you want to hide an element from the visible DOM, then you set its CSS as: display:none;. This is perfect for transitions.

There are more values that can be used for the display property but they are rarely used. Thank you for reading and don’t forget to share!