cssworld icon indicating copy to clipboard operation
cssworld copied to clipboard

【答疑】《CSS世界》-44-幽灵空白节点疑问

Open HuangYaobin opened this issue 3 years ago • 4 comments

<div><span></span></div>
span { display: inline-block; }

为什么这里的span一定要设置display: inline-block,此时幽灵空白节点才会撑开div的高度呢?

HuangYaobin avatar Oct 14 '21 05:10 HuangYaobin

Line boxes are created as needed to hold inline-level content within an inline formatting context. Line boxes that contain no text, no preserved white space, no inline elements with non-zero margins, padding, or borders, and no other in-flow content (such as images, inline blocks or inline tables), and do not end with a preserved newline must be treated as zero-height line boxes for the purposes of determining the positions of any elements inside of them, and must be treated as not existing for any other purpose.

原文:https://www.w3.org/TR/CSS2/visuren.html#inline-formatting

是因为行框盒子没有创建,所以没有幽灵空白节点?

HuangYaobin avatar Oct 14 '21 08:10 HuangYaobin

为什么不回答一下呢

niusz avatar Aug 25 '22 05:08 niusz

我也疑问为什么要设置这个

AlwaysLucky avatar Feb 05 '23 07:02 AlwaysLucky

我也疑问为什么要设置这个

可以看看这个 https://segmentfault.com/q/1010000014296346

HuangYaobin avatar Feb 05 '23 07:02 HuangYaobin