What to Block and what to Inline-block

Published 22 Nov by SuperNOVA

What to Block and what to Inline-blockToday 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;

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:
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: 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: The above shall render:
DEMO

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!