Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
Loirooriol opened this issue Sep 12, 2023 · 0 comments
Closed

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

Loirooriol opened this issue Sep 12, 2023 · 0 comments
Labels
Closed Accepted as Obvious Bugfix CSS2 css-inline-3 Current Work

Comments

@Loirooriol
Copy link
Contributor

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>
@Loirooriol Loirooriol added the css-inline-3 Current Work label Sep 12, 2023
@Loirooriol Loirooriol changed the title Only inline padding/border/margin avoids invisible line boxes [css-inline][css2] Only inline padding/border/margin avoids invisible line boxes Sep 25, 2023
fantasai added a commit that referenced this issue Aug 1, 2024
@fantasai
[css-inline-3] Only inline-axis mbp prevents a line from being invisi…
82aa075 
…ble #9344
@fantasai fantasai closed this as completed Aug 1, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Closed Accepted as Obvious Bugfix CSS2 css-inline-3 Current Work
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@fantasai @Loirooriol