Inline elements do not line up when content is added

Question

I am surprised that inline elements do not line up even though they have mathematically the same height.

One element has a height of 50px and the others have a height of 44px + 3px padding (= 50px height).

I have found some posts that say to use vertical-align: top;. But it is not clear to me why this is related to the content.

Without content they are displayed in a line, but as soon as I add content (text), the elements with height 50px are pushed down.

What is the reason for this and how can I change it?

HTML-Code

<div>
  <span class="x">x</span>
  <span class="y">x</span>
  <span class="x">x</span>
<div>

CSS

div {
  height: 50px;
}

span {
  display: inline-block;
  border: 1px solid black;
}

.x {
  height: 50px;
}

.y {
  height: 44px;
  padding: 3px 0;
}

Thanks a lot

Have you tried using flexbox ? The devtool allows to see how elements are placed — Xanthous, Jul 07 '21 at 07:19
Does this answer your question? [Why is this inline-block element pushed downward?](https://stackoverflow.com/questions/9273016/why-is-this-inline-block-element-pushed-downward) — Emaro, Jul 07 '21 at 07:26
Not really. I used the same text in all spans (i.e. without g, y, q, ...) so that the baseline is not affected. I also have not changed the overflow of the div. — Meisenmann, Jul 07 '21 at 11:12

score 0 · Answer 1 · answered Jul 07 '21 at 07:29

0

In your CSS Code, add vertical-align:top in the span like this:

span {
  display: inline-block;
  border: 1px solid black;
  vertical-align: top;
}

here's snippet:

div {
  height: 50px;
}

span {
  display: inline-block;
  border: 1px solid black;
  vertical-align: top;
}

.x {
  height: 50px;
}

.y {
  height: 44px;
  padding: 3px 0;
}

<div>
  <span class="x">x</span>
  <span class="y">x</span>
  <span class="x">x</span>
  <div>

answered Jul 07 '21 at 07:29

Shiz

695
10
27

Thank you for your answer. Setting vertical-align to top solves this problem, but I would like to understand why adding a content (text) changes the alignment. – Meisenmann Jul 07 '21 at 08:51

score -1 · Answer 2 · answered Jul 07 '21 at 07:20

-1

You can align them with f.e. display: flex

This has nothing to do with your issue but: read about em and remunits for better scalability of your desing.

div {
  height: 50px;
  display: flex;
}

span {
  margin-right: 10px;
  display: inline-block;
  border: 1px solid black;
}

.x {
  height: 50px;
}

.y {
  height: 44px;
  padding: 3px 0;
}

<div>
  <span class="x">x</span>
  <span class="y">x</span>
  <span class="x">x</span>
  <div>

answered Jul 07 '21 at 07:20

Pan Vi

627
6
17

Thank you for your answer. The flex layout solves this problem, but I would like to understand why adding a content (text) changes the alignment. – Meisenmann Jul 07 '21 at 08:50
1

Default value of `vertical-align` for `inline-block` is `baseline` which is trying to keep all the *x* on one level (this is happening in your original example). But one of the *x* is moved a little bit because of the padding you are adding. In order to keep all *x* on one level (in one line), the elements have to be misaligned. When you set the `vertical-align:top` it wont try to keep the *x* in line but will align the `inline-block` element on top. I tend to use `flex` on everything as it usually solves all my problem quickly. In this case is the `vertical-align:top` maybe a better solution. – Pan Vi Jul 07 '21 at 09:24
Thank you very much! Now I have understood it. The baseline refers to the text and not to the lower area of the box. – Meisenmann Jul 08 '21 at 07:24

Inline elements do not line up when content is added

2 Answers2