Why inline-block doesn't work on my code?

April 26, 2024

I’m setting inline-block to div but it doesn’t work, only inline-flex works

I want result like below, but it’s riches only when I set inline-flex

#account_corner {
  display: inline-block;
  position: relative;
  vertical-align: top;
  float: none;
  white-space: nowrap;
}

<div id="account_corner">
  <img style="height: 40px;" alt="account_photo" src="https://media.istockphoto.com/id/1300845620/vector/user-icon-flat-isolated-on-white-background-user-symbol-vector-illustration.jpg?s=612x612&amp;w=0&amp;k=20&amp;c=yBeyba0hUkh14_jgv1OKqIH0CCSWU_4ckRkAoy2p73o=">

  <div style="display: block;">
    <span style="margin: 0 5px;">Example</span>
    <p style="margin: 0 5px;">example@example.com</p>
  </div>

  <button onclick="/logout'">Logout</button>
</div>

>Solution :

You can use in this way:

Use a selector > * to set styles to all first level elements. You can set both display and vertical align here.

However, using flex/ grid layout would be better as you will have better control.

Inline-block

#account_corner {
  position: relative;
}

#account_corner > * {
  display: inline-block;
  vertical-align: top;
}

<div id="account_corner">
  <img style="height: 40px;" alt="account_photo" src="https://media.istockphoto.com/id/1300845620/vector/user-icon-flat-isolated-on-white-background-user-symbol-vector-illustration.jpg?s=612x612&amp;w=0&amp;k=20&amp;c=yBeyba0hUkh14_jgv1OKqIH0CCSWU_4ckRkAoy2p73o=">

  <div>
    <span style="margin: 0 5px;">Example</span>
    <p style="margin: 0 5px;">example@example.com</p>
  </div>

  <button onclick="/logout'">Logout</button>
</div>

Flex

#account_corner {
  display: flex;
  align-items: top;
}

<div id="account_corner">
  <img style="height: 40px;" alt="account_photo" src="https://media.istockphoto.com/id/1300845620/vector/user-icon-flat-isolated-on-white-background-user-symbol-vector-illustration.jpg?s=612x612&amp;w=0&amp;k=20&amp;c=yBeyba0hUkh14_jgv1OKqIH0CCSWU_4ckRkAoy2p73o=">

  <div>
    <span style="margin: 0 5px;">Example</span>
    <p style="margin: 0 5px;">example@example.com</p>
  </div>

  <button onclick="/logout'">Logout</button>
</div>

Grid

Grid layout is a bit advanced layout system but is very powerful. You can create a virtual grid and puts items in it. In this sample, I’m using grid-template-columns: 50px 180px 60px; to define layout but it can be anything you feel like. Every entry will be a column

#account_corner {
  display: grid;
  grid-template-columns: 50px 180px 60px;
}

<div id="account_corner">
  <img style="height: 40px;" alt="account_photo" src="https://media.istockphoto.com/id/1300845620/vector/user-icon-flat-isolated-on-white-background-user-symbol-vector-illustration.jpg?s=612x612&amp;w=0&amp;k=20&amp;c=yBeyba0hUkh14_jgv1OKqIH0CCSWU_4ckRkAoy2p73o=">

  <div>
    <span style="margin: 0 5px;">Example</span>
    <p style="margin: 0 5px;">example@example.com</p>
  </div>

  <button onclick="/logout'">Logout</button>
</div>

Suggestions

Position’s default value is relative, so no need to specify it.
Do not use both styles and class for styling. In your example, you are setting all children inline-block but div has a style setting it as block. Learn specificity and use classes instead
Think in terms of layout and not style elements on ad-hoc bases. It will help you in long term