Inline-blocks are aligned to the bottom line when using white-space CSS property

Question

HTML

<div class="container"> 
  <div class="item">
    many words in this div are showed in many lines
  </div>
  <div class="item this-item-shifted-down">
    one line
  </div>
  <div class="item">
    many words in this div are showed in many lines
  </div>
  <div class="item">
    many words in this div are showed in many lines
  </div>
  <div class="item">
    many words in this div are showed in many lines
  </div>
  <div class="item">
    many words in this div are showed in many lines
  </div>
  <div class="item">
    many words in this div are showed in many lines
  </div>
</div>

and CSS

.item {
  height:100px;
  width:100px;
  background:pink;
  margin:5px;
  display:inline-block;
  white-space:normal;
}
.container {
  white-space:nowrap;
}

There is a container, which contains many items, that should be displayed in one line with ability to go beyond the borders of container.

When I use white-space:nowrap; for container and white-space:normal for items, items are aligned to the bottom line.

How to align items to the top instead of bottom line of text and save ability to go beyoun the borders? Is this can be achieved without JavaScript? I've found some similar questions at stackoverflow, but they don't solve my problem.

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

In your case, the text in each inline-block element is being aligned to the baseline of the previous box. Therefore if the the amount of text varies, the alignment also varies. That's because the default value of the vertical-align property is baseline.

Here is a relevant quote from the specification regarding this behavior:

10.8 Line height calculations: the line-height and vertical-align properties

The baseline of an inline-block is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its overflow property has a computed value other than visible, in which case the baseline is the bottom margin edge.

Therefore you could simply add vertical-align: top to the inline-block elements in order to correct the alignment issue that you're seeing:

Updated Example

.item {
  height: 100px;
  width: 100px;
  background: pink;
  margin: 5px;
  display: inline-block;
  white-space: normal;
  vertical-align: top;
}

Inline-blocks are aligned to the bottom line when using white-space CSS property

1 Answers1