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>
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3
