理解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.

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