[css-inline][css2] 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)


Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[css-inline][css2] Only inline padding/border/margin avoids invisible line boxes #9344

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[css-inline][css2] Only inline padding/border/margin avoids invisible line boxes #9344

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions