An Examination of the CSS Display Property (Part 1/3)

The CSS property display is one of the pillars of web layout. It has several possible values, but today we will discuss mainly four - none, inline, block and inline-block. We will be going through what all these do.

display: none;

display: inline;

display: block;

display: inline-block;

Just to get it out of the way...

The value none for the display property will cause the element it is applied to, to not even show up in the browser. It will have visually the same effect as if the element (and its contents) did not exist in the HTML at all.

Got that? Good. Let's talk about inline elements. The majority of HTML elements tend to be inline by default, especially formatting tags such as b, i, em and strong. You can also use display: inline to force block level elements to act like inline elements (and vice versa) but this is usually impractical.

display: inline

Inline elements fit neatly on the same line they are introduced. Width-wise, they take up exactly the amount of space needed, no more or less. This also means that any attempts to manipulate the width via the width property will not work.

Here's an example using spans tag. For clarity, I have given it a red outline.

Here is a span tag <span style="outline:1px solid red">with a short string</span> for illustration.
<br />
Here is a span tag <span style="outline:1px solid red">with a much longer string</span> for illustration.

Here, you can see the difference. The span tag with the longer string automatically stretches to fit.

Here is a span tag with a short string for illustration.
Here is a span tag with a much longer string for illustration.

We've seen how inline elements handle width. Now how about height?

Here is a span tag <span style="outline:1px solid red;padding:5px">with a little padding</span> for illustration.
<br />
Here is a span tag <span style="outline:1px solid red;padding:20px">with a more padding</span> for illustration.

Here, we see that the padding affects the width in terms of space taken up, but not the height.

Here is a span tag with a little padding for illustration.
Here is a span tag with a more padding for illustration.

A possible exception for this is img tags. These tags are technically inline, but due to the ability to affect both width and height, they actually perform more like inline-block elements (which we will cover later).

donaldtrump.jpg

Yes, I used a picture of Donald Trump. He may as well make himself useful in this very educational blogpost.

Here is a img tag <img src="donaldtrump.jpg" style="outline:1px solid red;width:100px;height:100px">with more height for illustration.
<br />
Here is a img tag <img src="donaldtrump.jpg" style="outline:1px solid red;width:50px;height:50px">with less height for illustration.

As you can see, the images fall on the same line that they are introduced in, like inline elements. But height and width can be explicitly set, like inline-block elements! The explanation can be found here.

Here is a img tag with more height for illustration.
Here is a img tag with less height for illustration.00

This begs the question: how about floating? Well, since one needs a defined width in order for the float property to work at all, it stands to reason that this would not work for inline elements. Would it work for images, though?

Let's try it...

Here is a img tag <img src="donaldtrump.jpg"style="outline:1px solid red;width:50px;height:50px;float:left">floated left for illustration.
<br />
Here is a img tag <img src="donaldtrump.jpg"style="outline:1px solid red;width:50px;height:50px">with no float for illustration.

It works! img tags are a strange exception to the rule for inline elements, that's for sure.

Here is a img tag floated left for illustration.
Here is a img tag with no float for illustration.

Next

Using block elements.