[csswg-drafts] Only inline padding/border/margin avoids invisible line boxes (#9344)

Loirooriol has just created a new issue for https://github.com/w3c/csswg-drafts:

== Only inline padding/border/margin avoids invisible line boxes ==
https://drafts.csswg.org/css-inline/#invisible-line-boxes

> [Line boxes](https://drafts.csswg.org/css-inline/#line-box) that contain no text, no [preserved white space](https://drafts.csswg.org/css-text-4/#preserved-white-space), no [inline boxes](https://drafts.csswg.org/css-display-4/#inline-box) with **non-zero [margins](https://drafts.csswg.org/css-box-4/#margin), [padding](https://drafts.csswg.org/css-box-4/#padding), or [borders](https://drafts.csswg.org/css-box-4/#border)**, and no other [in-flow](https://drafts.csswg.org/css-display-4/#in-flow) content (such as [atomic inlines](https://drafts.csswg.org/css-display-4/#atomic-inline) or [ruby annotations](https://drafts.csswg.org/css-ruby-1/#ruby-annotation-box)), and do not end with a [forced line break](https://drafts.csswg.org/css-text-4/#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.

```html
<!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>
```

![](https://github.com/w3c/csswg-drafts/assets/7477678/280d3cab-a791-43b9-bd70-5d383c4718e8)


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9344 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 12 September 2023 10:00:43 UTC