Step by Step: Block and Inline CSS (2021)
Tags: css, tutorial, webdev, beginners
Published: 2021-09-23 09:19:56

---
canonical_url: "https://www.thangphan.xyz/posts/step-by-step-block-and-inline-css-2021/"
---


I usually use `display: block`, `display: inline` to CSS the HTML elements. But I only stop at the basic level of understanding these. In this post, I'm going to discover some properties that I thought it is interesting about `block`, `inline`.

### Review

Before I go forward, let's take a slight review of what I know so far.

#### Block

When I set:

```css
display: block;
```

The HTML element can have some benefits like:

- Be able to set width, height.
- Break the next element to new line.
- Be able to set padding, margin, border.
- Element's width automatically is the full width of its parent.

#### Inline

When I set:

```css
display: inline;
```

The HTML element can be had some benefits like:

- Don't be able to set width, height.
- Don't break the next element to new line.
- Be able to set padding, margin, border.
- Element's width doesn't automatically be the full width of its parent.

It's simple! Right! But I think it's not enough to make sure we can custom the layout of content. Let's move on next step to see what we can discover further.

### Writing Mode

Normally, text in the HTML element has the layout from left to right( some language that renders from right to left). If I want to set the direction of my content from right to left, how can I handle it?

Fortunately, we have `writing mode`, we can set the direction: horizontal, vertical for our content.

You might think: _what am I talking about? Does it relate to `block` and `inline`?_

Don't rush! My friend! We will learn about it step by step.

### Writing Mode CSS

In order to turn on writing mode, I need to use the CSS below.

```css
/* The content will be normal(horizontal direction) */
writing-mode: horizontal-tb;

/* The content will be vertical(left to right) */
writing-mode: vertical-lr;

/* The content will be vertical(right to left) */
writing-mode: vertical-rl;
```
{% codesandbox dazzling-banzai-bz9rk %}

Toggle the comment that was defined in `style` element, you can see the difference in the layout in three cases.

- `horizontal-tb`: content is rendered normally.
- `vertical-lr`: content is rendered vertical direction, header appear on the **left** side, paragraph on the **right** side.
- `vertical-rl`: content is rendered vertical direction, header appear on the **right** side, paragraph on the **left** side.

So far, nothing special! But I want to introduce to you one thing in `writing mode`.

When we turn on `writing mode`, it creates two directions, they are: `inline`, `block`, both of them are injected into the HTML element, and the direction of them depends on the property that we set on `writing-mode` CSS.

Hmm, It might look a little bit confusing here. Let's see three pictures below.

- `writing-mode: horizontal-tb`
  ![Horizontal In Writing Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7nffbcixoppxk1enqp05.png)

- `writing-mode: vertical-lr`
  ![Vertical Left To Right In Writing Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u20k9a3u6k0adlczaiwx.png)

- `writing-mode: vertical-rl`
  ![Vertical Right To Left In Writing Mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/evn1eck97nhywd4jqsv5.png)

What do `inline`, `block` mean in these pictures above?.

These directions are defined in `writing-mode` for making the base, and other properties CSS in `writing-mode` will be based on these directions(`block`, `inline`) to reflect. We need to use them later on.

> Tip: For easy to remember what directions will be `block` or `inline`.
>
> - The `block` direction: the flow that content is displayed.
>
> - The `inline` direction: the sentences flow

Let's use the tip above.

`writting-mode: horizontal-tb`

- _header_ -> _paragraph_ is displayed from top to bottom, you can see they take a break from _header_ to _paragraph_ -> vertical is the `block` direction.
- The sentences flow is horizontal -> horizontal is the `inline` direction.

`writting-mode: vertical-lr`

- _header_ -> _paragraph_ is displayed from left to right, you can see they take a break from _header_ to _paragraph_ -> horizontal is the `block` direction.
- The sentences flow is vertical -> vertical is the `inline` direction.

`writting-mode: vertical-rl` I save it for you.

### Custom Content

Now, we already had the basic knowledge about `writing-mode`. Let's use it to custom the content.

I have two blocks: `writing-mode: horizontal-tb`, `writing-mode: vertical-lr`.

{% codesandbox writing-mode-2-pu5y5 %}

Using the tip above I can determine that:

- The first block directions: horizontal: `inline`, vertical: `block`.
- The second block directions: horizontal: `block`, vertical: `inline`.

Now, I'm able to use other CSS(logical CSS: the CSS use for `writing-mode`) to
custom the content.

I'm going to use the `inline-size` property. You need to remember that
`inline-size` will define the dimension for `inline` direction that we talked
about above. In this case, `inline-size` will define the dimension of horizontal
for the first block(you can think it defines width dimension), and define the
dimension of vertical for the second block(height dimension).

Replace `width: 100px` using

```css
inline-size: 200px;
```

I will have the result below.

{% codesandbox writing-mode-3-ftbwp %}

### Go further

There are tons of properties in `writing-mode`, and they are called `Logical Properties`. 
You can learn more [here](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties).

I have ever met some CSS like `margin-block-start`, and didn't know what is it?

It turns out I met `Logical Properties` CSS.

Let's use some `Logical Properties` to illustrate.

```css
/*
- The first case
	- margin-top: 20px, padding-left: 20px, border-right: solid 2px red;
- The second case
	- margin-left: 20px, padding-top: 20px, border-bottom: solid 2px red; 
*/
margin-block-start: 20px;
padding-inline-start: 20px;
border-inline-end: solid 2px red;
```

And we have the result below.

{% codesandbox writing-mode-4-g9olt %}

### Conclusion

I have covered about `writing-mode` in this article. But can you remember the most important concept? Why don't take a review and practice with some example ?
I think it's worth understanding the concepts of `writing-mode` before we moving on to `CSS layout`.