.my-element {
display: inline-block;
}
If you're a web developer, you've probably seen a bit of CSS that looked like this before. And if you're a newbie web developer like I was for a long time, you have no idea what it does.
For the first several years of my career, whenever I saw CSS like what I wrote above, I wouldn't try to wrap my head around it, I wasn't trying to understand or even do my styling well. I was simply trying to get the styling over with because I hated CSS. I mean, it really drove me nuts.
To the old version of myself, CSS seemed like an arbitrary, capricious, language. Certain declarations would work initially and randomly become impotent with the addition of another. The words used to describe the language were meaningless. The cascade in cascading style sheets was a complete mystery. Seriously though, what's cascading!? My sanity? And the box model was simply that thing at the bottom of the dev tools window. Yes, I could center a div. Yes, I could change colors. Yes, I knew how to make a button look decent. But I still didn't understand what I was doing - I just had a bag of assorted tricks which I was occasionally adding to.
It wasn't until a colleague of mine suggested I pick up Joshua Comeau's course on CSS that any of this started to make a modicum of sense. I want to share a nugget I found in that course, and suggest you go check it out for yourself.
Two Types of Elements
We can think of each element in HTML as having a default of either display: block
or display: inline
. Elements with a
default display value of block
are called block-level elements.
And elements with a default display value of inline
are referred to as inline-level elements.
Some examples of block-level elements are:
<div/>
<span/>
<p />
<aside />
Here are a few examples of inline-level elements:
<a />
<label/>
<span />
<strong />
Block
Now, take a look at this CSS and try to describe to yourself what it does without using the word "block":
.my-element {
display: block;
}
If you can't come up with a decent explanation, don't worry, I'm here to help.
To understand what the word block
means in the context of CSS it helps to go way back to middle school when they taught
you how to write a business letter. One of the formats for a business letter is called block format.
In block format, each element of the business letter is stacked vertically on top of one another. Your address is at the top, then there's a date, and your receiver's address, and then the greeting and the content of the letter. All stacked vertically atop one another.
In CSS, you can think of elements that have display: block
similarly, it means that it should be stacked vertically,
not side to side.
You'll also note that in a block-formatted letter, the content is "justified" left. It all aligns with a left margin. "Justify" is another term brought to the web from print media - perhaps for another article.
Block Element Details
Block-level elements bring with them a certain set of behaviors that are important to know about:
- Block-level elements begin on a new line: below or above their siblings in the DOM.
- Block-level elements grow in width to fill their container.
- Block-level elements shrink in height to fit around their descendant DOM elements.
And with that last bullet point, I may have illuminated a whole heap of trouble that you, like me, have felt when dealing with CSS:
Suppose you want to set the height of a <div />
to fill all vertical space on the screen. So, you
go ahead and set min-height: 100%
. And nothing happens.
Nothing happened because block elements always take up the minimum amount of vertical space to fit their descendants.
Using a percentage-based height like this is telling the <div />
to utilize 100% of the vertical space of its parent.
But the parent element is looking to the <div />
to figure out how much vertical space it should fill on the screen - it's a catch-22.
So how do you fix it? You have to set height: 100%
on the html
tag and on all tags descending
to the <div />
in question. This is because the html
tag gets its height from the viewport - which is, more or less,
what you meant by min-height: 100%
.
Inline
Now that we've gone over what a block element is, the description of inline will hopefully be much easier. Inline elements display themselves in rows, rather than columns.
If I was writing a letter and wanted to format the receivers address "inline" with the sender's address, I would probably choose to justify the receiver's address with the right of the page and put it on the same line as the sender's address. It's the same idea with inline-level elements - they share the same line.
Inline-level Element Details
In the browser, inline elements are treated like you'd expect a word processor to treat individual words.
Because of this, inline-level elements are very hard to move around on the DOM because they won't take a width or height.
You may have tried setting a width or height on a <span/>
tag once or twice and been completely dumbstruck when nothing
happened. That's because inline elements are meant to go inside text - they are treated like typography, whereas block elements
are treated like sections, or, well... blocks!
Some of the behaviors unique to inline elements are:
- Inline-level elements are the only elements that can do a line-break mid-content and therefore take a shape other than a rectangle.
- Inline-level elements have a set
width
andheight
, adding these properties to an inline element will have no effect. - Inline-level elements have hidden space above and below them to accommodate for the
line-height
of the page.
Inline-block
Now that we've covered inline and block, we can finally cover the nasty conglomerate inline-block
.
Adding the declaration display: inline-block;
to a bit of CSS is like telling the browser, "display this element in
line with its siblings, but allow me to style it like a block element". That means you can give it a height, margin, a
width, and otherwise go to town with the styling, while keeping the element in question and all its siblings in a nice,
neat, line.
Inline-block elements, however, cannot line wrap. So if the content of your inline-block element is long, the page will shove it down to the next line, potentially leaving you with a gross looking space on the line before.
Conclusion
Well, if you're less confused now than you were before you came to this article, I suppose I've done my job. Once again, I can't recommend Joshua Comeau's course on CSS enough. Take a look at it and allow him to persuade you that CSS is not too confusing.