继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

刨根问底:浏览器如何渲染inline元素中空格

隔江千里
关注TA
已关注
手记 299
粉丝 39
获赞 182

假设有如下的css样式

span {    font-size: 300%;    border: 1px solid red;
}

如下的html代码

<div>
    <span>   aa   </span><span>bb</span><span>   cc   </span><span>   dd   </span><span>   ee   </span></div>

显示效果如下:


https://img.mukewang.com/5d5806a400014c3b04800116.png

有些空格消失了

为什么有些空格不显示了呢?还是从CSS规范中找答案.

Any space immediately following another collapsible space—even one outside the boundary of the inline containing that space, provided both spaces are within the same inline formatting context—is collapsed to have zero advance width.

在collapsible空格后面出现的空格——即使前一个空格不在包含后一个空格的inline元素中,只要两个空格都在同一个context中——都会被collapse.

A sequence of collapsible spaces at the beginning of a line is removed.
A sequence of collapsible spaces at the end of a line is removed.

头尾的空格会被移除.
因此会出现如图所示的结果



作者:大神带我来搬砖
链接:https://www.jianshu.com/p/de93ce38c362


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP