Repository navigation
[css-inline][css2] Only inline padding/border/margin avoids invisible line boxes #9344
Description
https://drafts.csswg.org/css-inline/#invisible-line-boxes
Line boxes that contain no text, no preserved white space, no inline boxes with non-zero margins, padding, or borders, and no other in-flow content (such as atomic inlines or ruby annotations), and do not end with a forced line break are invisible line boxes.
However, padding/border/margin in the block axis doesn't prevent the line boxes from becoming invisible (if the other conditions hold). It only happens in the inline axis. I have tested Gecko, Blink and WebKit.
<!DOCTYPE html>
<style>
.wrapper { display: inline-block; width: 50px; border: solid; margin: 5px; vertical-align: top; }
.wrapper > div { line-height: 0; font-size: 0; background: magenta }
.wrapper > div::after { content: ""; display: block; margin-top: 25px; height: 25px; background: cyan }
</style>
<div class="wrapper"><div><span style="padding-top: 1px"></span></div></div>
<div class="wrapper"><div><span style="padding-bottom: 1px"></span></div></div>
<div class="wrapper"><div><span style="padding-left: 1px"></span></div></div>
<div class="wrapper"><div><span style="padding-right: 1px"></span></div></div>
<br>
<div class="wrapper"><div><span style="border-top: solid"></span></div></div>
<div class="wrapper"><div><span style="border-bottom: solid"></span></div></div>
<div class="wrapper"><div><span style="border-left: solid"></span></div></div>
<div class="wrapper"><div><span style="border-right: solid"></span></div></div>
<br>
<div class="wrapper"><div><span style="margin-top: 1px"></span></div></div>
<div class="wrapper"><div><span style="margin-bottom: 1px"></span></div></div>
<div class="wrapper"><div><span style="margin-left: 1px"></span></div></div>
<div class="wrapper"><div><span style="margin-right: 1px"></span></div></div>
Activity
[-]Only inline padding/border/margin avoids invisible line boxes[/-][+][css-inline][css2] Only inline padding/border/margin avoids invisible line boxes[/+][css-inline-3] Only inline-axis mbp prevents a line from being invisi…
Loirooriol commentedon Sep 16, 2025
Tests: web-platform-tests/wpt#54833