0

So if I've got two sibling HTML elements like so:

<div>
  <span id="child-one">ChildOne</span>
  <span id="child-two">ChildTwo</span>
</div>

And one, but not both, of these two sibling elements have "display:inline-block" AND "overflow:hidden" in their styling:

#child-one {
  display: inline-block;
}

#child-two {
  display: inline-block;
  overflow: hidden;
}

Then one sibling is shown offset a small distance below the other. (See it happening here: https://jsfiddle.net/reyan62/oqc71f25/) (P.S. I'm using Chrome)

Does anyone have an explanation for this? It seems very odd. I'm not super familiar with what "display:inline-block" does though.

Thanks!

Reyan
  • 584
  • 1
  • 5
  • 16

4 Answers4

1

I would suggest using overflow: hidden; on both elements. If it's not possible you can use vertical-align to address the issue. This question/answer explains the reason.

Community
  • 1
  • 1
EternalHour
  • 8,308
  • 6
  • 38
  • 57
0

Add div > span { vertical-align: top; } to fix this.

Like so: https://jsfiddle.net/oqc71f25/2/

Robert McKee
  • 21,305
  • 1
  • 43
  • 57
0

This is the best guide I used to understand how inline-block works, I hope it helps you,

http://learnlayout.com/inline-block.html

nxmode
  • 21
  • 1
0

I would try to use overflow:hidden on the both of them or you can align them manually.

You could also position your elements into the div.

Tommy D
  • 440
  • 1
  • 3
  • 13