专栏首页大神带我来搬砖理解HTML工作原理——浏览器如何渲染inline元素中空格

理解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 条评论
登录 后参与评论

相关文章

  • 记一次高级软件架构师的铩羽而归

    前几天女朋友笔记本电脑开机后进不了系统了,鉴于我天天告诉她要用宏来处理Excel,于是耳提面命,让我来修修。当时我想,这有何难,哪有程序员修不了电脑的?正如马谡...

    大神带我来搬砖
  • 理解HTML工作原理——HTML form隐式提交

    有时在HTML页面form的input里按了回车键会提交该表单,并且form的submit按钮的click事件也会被触发.这是什么原理呢?是因为form的隐式提...

    大神带我来搬砖
  • 一步步成为linux大神——bash shell中管道和其他命令分隔符的优先级

    一般在bash中,用“|”作为管道,即pipeline,还可以用“;”之类的分隔符连接多个命令。那么下面这个命令的输出是什么呢? date; who |wc 根...

    大神带我来搬砖
  • spring-boot-2.0.3源码篇 - filter的注册,值得一看

        过年女婿来岳父家走亲戚,当时小舅子主就问:姐夫,你什么时候能给我姐幸福,让我姐好好享受生活的美好。你们这辈子不准备买一套大点的房子吗?姐夫说:现在没钱啊...

  • 字旋转器的距离:分解向量可以得到更好的表示(CS.CL)

    评价文本间语义相似度的一个关键原则是通过考虑词与词之间的对齐来衡量它们之间的语义重叠程度。然而,基于对齐的方法在性能上不如一般的句子向量。我们假设,基于对齐的方...

    用户7236395
  • 如何升级到Ubuntu 16.04 LTS

    警告:与操作系统主要版本之间的几乎任何升级一样,此过程存在故障,数据丢失或软件配置损坏的固有风险。强烈建议进行全面备份和广泛测试。

    楠宝宝
  • CSS 3.0实现文字悬停特效

    越陌度阡
  • Spring Boot 实现单点登录的第三种方案!

    今天来和大家介绍第三种方案,使用 Spring Security 开发 CAS 单点登录系统客户端。

    江南一点雨
  • OpenFogOS 安装配置 FAQ

    在 x86_64 的 Linux 系统上一键部署 OpenFogOS 节点时出现问题,安装不成功。

    雪梦科技
  • Solr配置maxBooleanClauses属性不生效原因分析

    我是攻城师

扫码关注云+社区

领取腾讯云代金券