An Examination of the CSS Display Property
17th
June 2023, 22:05
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.
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.
Here's an example using spans tag. For clarity, I have given it a red outline.
Here, you can see the difference. The span tag with the longer string automatically stretches to fit.
We've seen how inline elements handle width. Now how about height?
Here, we see that the padding affects the width in terms of space taken up, but not the height.
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).
Yes, I used a picture of Donald Trump. He may as well make himself useful in this very educational blogpost.
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.
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...
It works! img tags are a strange exception to the rule for inline elements, that's for sure.
Block elements are responsible for much of the layout in HTML. While inline elements tend to focus more on content, block elements are usually the placeholders that house that content.
The common div tag is a ubiquitous example. So are paragraph and header tags. In fact, many of the tags introduced in HTML5 are block-level elements - footer, aside, article, section and so on. Basically, tags that, before HTML5, might have been represented as div tags.
Let's try this with a paragraph.
Here, we see that the content of the tag is on its own line! And it has a top and bottom margin, to boot.
Another feature of block-level elements is that if width is not specified, they take up the entire width of their parents by default.
The div tags still take up their own row, but only the first one, with no width specified, takes up the entire row. Unlike the paragraph example above, it has no padding by default.
Now how about height and padding? Let's see...
The padding works vertically and horizontally, and both width and height are honored!
And of course, since there are widths specified, the float property will work!
Up next, we examine using the inline-block value for the display property. As far as I can tell, there are no HTML5 elements whose display property is, by default, inline-block. Therefore, this is something that a web developer has to explicitly define in the styling.
One of the most common usages of this is horizontal navigation bars.
The first span tag behaves exactly as we would expect. The width specified is not long enough, so the span tag expands. But in the second tag, the span tag is an inline-block element, and the width's value is honored. Also, the height's specification works in the latter case but not the former.
We've tried turning an inline element into an inline-block element. What happens when we do that to a block element?
In the first instance, the div takes on its own row. In the second example, the div has been changed to an inline-block element and now flows within the content in the same row! In both cases, height and padding reflect the values that have been input.
Use block elements for cases when you need the content to occupy its own row.
And when you need the content to flow and yet also want to control, the width, height, padding (and all associated properties), use inline-block for the display property.
Tags
See also
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.
<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.
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.
<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.
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.
<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 tagwith less height for illustration.00
with more height for illustration.
Here is a img tag
with less height for illustration.00This 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.
<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 tagwith no float for illustration.
floated left for illustration.
Here is a img tag
with no float for illustration.Block elements are responsible for much of the layout in HTML. While inline elements tend to focus more on content, block elements are usually the placeholders that house that content.
The common div tag is a ubiquitous example. So are paragraph and header tags. In fact, many of the tags introduced in HTML5 are block-level elements - footer, aside, article, section and so on. Basically, tags that, before HTML5, might have been represented as div tags.
display: block
One feature of a block element is that they will always start on a new row.Let's try this with a paragraph.
Here is a <p style="outline:1px solid red;">paragraph tag</p> for illustration.
Here, we see that the content of the tag is on its own line! And it has a top and bottom margin, to boot.
Here is a
paragraph tag
for illustration.Another feature of block-level elements is that if width is not specified, they take up the entire width of their parents by default.
Here is a <div style="outline:1px solid red;">div tag with no width specified</div> for illustration.
<br />
Here is a <div style="outline:1px solid red;width:50%">div tag with 50% width specified</div> for illustration.
<br />
Here is a <div style="outline:1px solid red;width:50%">div tag with 50% width specified</div> for illustration.
The div tags still take up their own row, but only the first one, with no width specified, takes up the entire row. Unlike the paragraph example above, it has no padding by default.
Here is a
Here is a
div tag with no width specified
for illustration.
Here is a
div tag with 50% width specified
for illustration.Now how about height and padding? Let's see...
Here is a div tag <div style="outline:1px solid red;height:50px;width:100px;padding:5px">with a little padding</div> for illustration.
<br />
Here is a div tag <div style="outline:1px solid red;height:50px;width:100px;padding:20px">with more padding</div> for illustration.
<br />
Here is a div tag <div style="outline:1px solid red;height:50px;width:100px;padding:20px">with more padding</div> for illustration.
The padding works vertically and horizontally, and both width and height are honored!
Here is a div tag
Here is a div tag
with a little padding
for illustration.
Here is a div tag
with more padding
for illustration.And of course, since there are widths specified, the float property will work!
<div style="outline:1px solid red;height:50px;width:100px;padding:5px;float:left">Floated left with a little padding.</div>
<div style="outline:1px solid red;height:50px;width:100px;padding:20px;float:right">Floated right with more padding</div>
<div style="outline:1px solid red;height:50px;width:100px;padding:20px;float:right">Floated right with more padding</div>
Floated left with a little padding.
Floated right with more padding
Up next, we examine using the inline-block value for the display property. As far as I can tell, there are no HTML5 elements whose display property is, by default, inline-block. Therefore, this is something that a web developer has to explicitly define in the styling.
One of the most common usages of this is horizontal navigation bars.
display: inline-block
Using this value causes the element to have width, height and padding all definable (and by extension, the float property) while otherwise behaving exactly like an inline element.Here is a span tag <span style="outline:1px solid red;width:100px;height:100px;padding:5px">with display property unmodified</span> for illustration.
<br />
Here is a span tag <span style="outline:1px solid red;width:100px;height:100px;padding:5px;display:inline-block">with display property inline-block</span> for illustration.
<br />
Here is a span tag <span style="outline:1px solid red;width:100px;height:100px;padding:5px;display:inline-block">with display property inline-block</span> for illustration.
The first span tag behaves exactly as we would expect. The width specified is not long enough, so the span tag expands. But in the second tag, the span tag is an inline-block element, and the width's value is honored. Also, the height's specification works in the latter case but not the former.
Here is a span tag with display property unmodified for illustration.
Here is a span tag with display property inline-block for illustration.
Here is a span tag with display property inline-block for illustration.
We've tried turning an inline element into an inline-block element. What happens when we do that to a block element?
Here is a p tag <p style="outline:1px solid red;width:100px;height:100px;padding:5px">with display property unmodified</p> for illustration.
<br />
Here is a p tag <p style="outline:1px solid red;width:100px;height:100px;padding:5px;display:inline-block">with display property inline-block</p> for illustration.
<br />
Here is a p tag <p style="outline:1px solid red;width:100px;height:100px;padding:5px;display:inline-block">with display property inline-block</p> for illustration.
In the first instance, the div takes on its own row. In the second example, the div has been changed to an inline-block element and now flows within the content in the same row! In both cases, height and padding reflect the values that have been input.
Here is a p tag
Here is a p tag
with display property unmodified
for illustration.Here is a p tag
with display property inline-block
for illustration.In a nutshell
Use inline elements for cases where you need the content to flow within the content that it appears in.Use block elements for cases when you need the content to occupy its own row.
And when you need the content to flow and yet also want to control, the width, height, padding (and all associated properties), use inline-block for the display property.
See you again. Don be a stranger!
