# Inline-block element use cases

**URL:** <https://forum.kirupa.com/t/inline-block-element-use-cases/648668>\
**Category:** web dev\
**Created:** [August 23, 2021, 9:18pm UTC](https://forum.kirupa.com/t/inline-block-element-use-cases/648668 "2021-08-23T21:18:20Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![sephorus](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sephorus/32/15120_2.png) [@sephorus](https://forum.kirupa.com/u/sephorus)\
**Post date:** [August 23, 2021, 9:18pm UTC](https://forum.kirupa.com/t/inline-block-element-use-cases/648668/1 "2021-08-23T21:18:20Z")

</div>

Hi everyone,

Today I am wondering about what are some use cases for inline-block elements.

The use cases for display: inline; and display: block; are intuitive to me. Use inline if you want to apply a style to a short span of text (e.g. a few words), and block for creating containers with a set height and width. There are also other applications of inline/block.

I haven’t dealt with inline-block elements that much, so I was wondering if someone has some insight into this.

Thank y’all!

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 24, 2021, 4:17am UTC](https://forum.kirupa.com/t/inline-block-element-use-cases/648668/2 "2021-08-24T04:17:00Z")

</div>

I was about to write some examples, but then I remembered this pandemic reading on CSS Tricks that is really good:

> **[When Do You Use Inline-block? | CSS-Tricks](https://css-tricks.com/when-do-you-use-inline-block/)**
>
> The inline-block value for display is a classic! It's not new and browser support is certainly not something you need to worry about. I'm sure many of us

🙂

---

<div class="post-metadata">

**Author:** ![sephorus](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/sephorus/32/15120_2.png) [@sephorus](https://forum.kirupa.com/u/sephorus)\
**Post date:** [August 25, 2021, 7:09pm UTC](https://forum.kirupa.com/t/inline-block-element-use-cases/648668/3 "2021-08-25T19:09:37Z")

</div>

The article talks about how 1) “block-direction margin on inline elements is ignored entirely” and 2) “the padding on inline elements doesn’t affect the height of the line text”.

What do they mean by block-direction? Elements that have display: block; are ordered from top to bottom, so does this just mean the margin-top and margin-bottom of inline elements are ignored?

For the second statement, does the padding of the inline element get calculated when determining the height of the element, but ignored by the parent

OR

does the padding just get ignored when calculating the height of the child, thus the parent height isn’t affected.

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 26, 2021, 4:53am UTC](https://forum.kirupa.com/t/inline-block-element-use-cases/648668/4 "2021-08-26T04:53:51Z")

</div>

> [@sephorus](#):
>
> What do they mean by block-direction? Elements that have display: block; are ordered from top to bottom, so does this just mean the margin-top and margin-bottom of inline elements are ignored?

That is correct about the block-direction. In languages like English where characters flow horizontally, the `margin-top` and `margin-bottom` on inline elements are ignored. The `margin-left` and `margin-right` properties will work.

> [@sephorus](#):
>
> For the second statement, does the padding of the inline element get calculated when determining the height of the element, but ignored by the parent

No, the height of the element doesn’t contain the padding values. Visually we can see it, but the actual height calculation (like via `getComputedStyle`) will just return **auto**.

Great questions!

🙂