CSS - What is inline and block size?

Background

I have been working on a post about container queries and ran across the CSS concepts of inline-size and block-size. These were new to me, and I suspect many (most) of you are not familiar with the concepts either. So, I offer this mini-primer on inline/block sizing.

First, consider the terms inline and block. These should be familiar as they are value options for the display property. If we designate an element with display: inline; we are saying that it will flow horizontally. For example, <strong></strong> is typically an inline element as we want the text in the element to appear inline (flow horizontally) with the surrounding text.

Contrast that with the <p></p> element that is typically a block element. We expect paragraphs to flow vertically, one after the other.

Size

As inline elements expand, they grow horizontally, and their size is often referenced by their width. Similarly, block elements expand vertically, and their size is often referenced by their height. In our simple example, inline-size refers to the width of the element and block-size refers to the height of an element.

Expand Your Context

So why do we need to have inline-size and block-size when they just reference properties that we already have (with which we are very familiar)? The answer is simple - not everyone uses a left-to-right horizontally oriented language. All of my applications (and sites) have assumed that the text would be in English or Spanish. What a narrow world I operate in!

CSS allows for vertically oriented languages (e.g., Chinese, Japanese, Korean). The writing-mode CSS property can be used to change inline flow from horizontal to vertical. Further, the direction CSS property will change flow from left-to-right (ltr) to right-to-left (rtl). Check out my Pen that demonstrates these properties.

Back to Size

As we change the writing mode from vertical to horizontal, we change the meaning of the size properties. In a vertical 'mode' inline-size refers to height since elements expand vertically as text is added. block-size under a vertical 'mode' references the width of the element.

Thus,

inline-size is a text-orientation-aware version of width.

"If the writing mode is vertically oriented, the value of `inline-size` relates to the height of the element; otherwise, it relates to the width of the element." MDN - inline-size

block-size is a text-orientation award version of height.

"If the writing mode is vertically oriented, the value of `block-size` relates to the width of the element; otherwise, it relates to the height of the element." MDN - block-size

Have a look at my Pen that allows you to play with inline-size and block-size with both a horizontal and vertical writing mode

And More...

The concepts of inline and block are important as representations of flow that are dependent on the text orientation. And these terms come up in other contexts. For example, when working with scroll snap, you can indicate which type of scrolling you want to affect - horizontal or vertical. This is usually done with the x and y values but you can also use inline and block so that as the text orientation changes, so too will the scroll snap behavior.