理解HTML工作原理——浏览器如何渲染inline元素中空格

假设有如下的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>

显示效果如下:

有些空格消失了

为什么有些空格不显示了呢?还是从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.

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏性能与架构

JS中控制好this关键字的指向

javascript中的 this 的指向不太好控制,理解不好的话很容易错误 下面几个示例可以加深对this指向的理解 (1)内联事件 <a href="...

288110
来自专栏coder修行路

Python爬虫从入门到放弃(十四)之 Scrapy框架中选择器的用法

Scrapy提取数据有自己的一套机制,被称作选择器(selectors),通过特定的Xpath或者CSS表达式来选择HTML文件的某个部分 Xpath是专门在X...

20780
来自专栏Golang语言社区

JS基础(上)

JS与DOM的关系 浏览器有渲染html代码的功能,把html源码(如div,p标签等)在内存里形成一个DOM对象 文档对象模型DOM(Document Obj...

684140
来自专栏练小习的专栏

CSS计数器 counter

适用场景: 当排序以及序号变动对服务端造成的压力大的情况下,使用css计数。 在早期,只有ol和ul可以对子元素li进行排序,,而CSS2.1规范中加入了co...

24490
来自专栏行者常至

005.golang 控制语句

10930
来自专栏学海无涯

2.Swift初体验

16130
来自专栏Golang语言社区

切片的内部实现

type slice struct {         array unsafe.Pointer         len   int         ca...

381110
来自专栏柠檬先生

zepto 基础知识(5)

81.width   width() 类型:number   width(value) 类型:self   width(func...

22470
来自专栏友弟技术工作室

golang爬虫初体验

最近在学习golang,看网上很多人都喜欢爬豆瓣,今天我就写了一个golang版的爬虫。对于python爬虫,我很了解,什么dom树,js异步,爬虫技术栈都是没...

19040
来自专栏柠檬先生

html5 新特性

1.querySelector 返回文档中匹配指定css选择器的一个元素.     注意:uerySelector() 方法仅仅返回匹配指定选择器的第一个元...

252100

扫码关注云+社区

领取腾讯云代金券