ladybird/Tests/LibWeb/Layout/input/vertical-align-middle-with-padding.html
Jelle Raaijmakers 1e0013a3bc LibWeb: Use margin box height for inline-block vertical alignment
For `vertical-align: middle` and `vertical-align: text-bottom`, we used
just the content height of the inline box to determine its alignment
position. This caused incorrect positioning when padding is applied.

This fixes the button alignment on our GitHub page.

Fixes #290.
2025-07-12 18:03:14 +02:00

26 lines
455 B
HTML

<!DOCTYPE html>
<style>
.a {
float: left;
}
.b {
border: 1px solid blue;
height: 30px;
width: 30px;
}
.ib {
display: inline-block;
padding: 10px;
}
.c {
border: 1px solid red;
vertical-align: middle;
}
.d {
border: 1px solid purple;
vertical-align: text-bottom;
}
</style>
<div class="a"><div class="b">B</div></div>
<div class="a"><span class="ib c">C</span></div>
<div class="a"><span class="ib d">D</span></div>