Why are "Foo" and "Bar" not aligned vertically in my example?
If I stop hiding the overflow from the parent of "Bar" (click the button) – suddenly the overflowed element "Baz" does align with "Foo".
When overflowed, "Foo" and "Bar" have the exact same height when inspected, they are simply rendered at a different height and I can’t figure out why.
The JS is not relevant, just helps demonstrate the problem.
const target = document.querySelector("#second")
const button = document.querySelector("button")
toggle = true
button.addEventListener("click", () => {
if (toggle) {
target.style.overflow = "initial"
} else {
target.style.overflow = "hidden"
}
toggle = !toggle
})
* {
margin: 0;
padding: 0;
line-height: 1em;
box-sizing: border-box;
}
main {
background: #eee;
padding: 1em;
font-size: 8vw;
}
#first {
background: red;
display:inline-block;
height: 1em;
}
#second {
background: blue;
display:inline-block;
height: 1em;
overflow: hidden;
}
<button>Toggle overflow for #second</button>
<main>
<span id="first">
FOO[
</span><span id="second">
<div>]BAR</div>
<div>]BAZ</div>
</span>
</main>
2
Answers
Ok, so looking at your example. I think you can solve this with flex containers. for sure you can cleanup this a bit. But this removes the need to correct the alignment with margin.
Here a codepen
Those are inline-blocks which by default are aligned along their baseline. Add
vertical-align: top;
and you’ll be set: