<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <style>

  div{

    background: black;

  }

  span{

    display: inline-block;

  }

  </style>

</head>

<body>

  <div>

    <span></span>

  </div>

</body>

</html>

可以看出div高度为20像素，明明span的高度为0，div的高度也应是0，为甚么会如图显示20像素。因为它存在每个“行框盒子”前面，同时具有该元素字体和行高属性的0宽度的内联盒

参考阅读：

《CSS世界》

css之幽灵空白节点的更多相关文章

  1. css消除空白节点的方法

    在做配置页面的时候,出现一个现在现象,两个同样的div(外框尺寸也是一样的),div里面包含有三个小的div ,三个小的div宽度也是一样的,同为33.3%,但是出现奇怪现象的就是左边一个有滚动条,右 ...

  2. js中移除空白节点

    //移除空白节点,空白节点的类型是3 function removeWhiteNode(node) {     for (var i = 0; i < node.childNodes.lengt ...

  3. JavaScript的DOM_处理空白节点

    一.空白节点产生的原因 在非 IE6,7,8 中,标准的 DOM 具有识别空白文本节点的功能.  在火狐浏览器等其他浏览器中是 7个,而 IE6,7,8 自动忽略了,如果要保持一致的子元素节点,需要手 ...

  4. 因浏览器而异的空白节点(js清除空白节点)

    先看下面的代码:<dl id="dll">  <dt>title</dt>  <dd>definition</dd>&l ...

  5. 为什么要点两下才能删除一个li节点 原来是空白节点作怪

    奇怪吧,下面的代码居然要点两次button才能删除一个li节点: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional// ...

  6. css禁止双击dom节点被选中user-select:none

    css禁止dom节点被选中:  当某个dom节点在快速重复点击的时候出现这个节点被选中,有时候其实并不希望出现这种情况,比如我们使用一个span或者a标签做为按钮dom元素的时候,快速双击这个按钮,就 ...

  7. 彻底搞懂CSS文本、空白换行问题

    首先,我们来整理一下与换行有关的3个CSS属性: word-break 该属性决定文本内容超出容器时,浏览器是否自动插入换行符. 属性值: normal:默认换行规则——英文以词为单位换行,连续字符不 ...

  8. 怎样通过CSS选择器获取元素节点或元素节点集合

    使用 document.querySelector() 和 document.querySelectorAll(), 将 CSS选择器 作为参数传入即可. // 标签选择器 document.quer ...

  9. [HTML/CSS]有一种节点叫做文本节点

    HTML可以看成是由节点(node)组成的树结构 我们一般都是在<p>节点里面写字符串. 在上图中,<p>节点和字符串之间有一个text, 这个text就是文本节点. 我们可以 ...

随机推荐

  1. mysql-笔记-datetime

    1 adddate(date,interval expr unit)--同 date_add() select date_add('2019-4-20',interval 31 day); selec ...

  2. python学习日记（面向对象——组合）

    组合指的是,在一个类中以另外一个类的对象作为数据属性,称为类的组合 圆环是由两个圆组成的,圆环的面积是外面圆的面积减去内部圆的面积.圆环的周长是内部圆的周长加上外部圆的周长.这个时候,我们就首先实现一 ...

  3. 题解：luoguP1861 星之器

    为什么全世界都说这是个物理题,不应该是一个数学题吗,神犇的势能完全看不懂 我们直接来看题,对于一个点,在计算时候横坐标和纵坐标互不影响,所以我们分开考虑. 我们记两个点假如横坐标相同,分别记纵坐标为a ...

  4. jmeter笔记（9）--JDBC Request的使用

    JDBC Request可以向数据库发送一个JDBC(Java Data Base Connectivity)请求(sql语句),获取返回的数据库数据进行操作.它需要和JDBC Connection ...

  5. CentOS 7 系统基础配置

    系统版本:CentOS 7.2.1511 Minimal 采用最小化系统安装,许多组件默认是不安装的,通过手工安装一些常用工具包,让系统用起来更顺手. 1.修改机器名: [root@centos7-m ...

  6. elasticsearch 6.2.4添加用户密码认证

    elasticsearch 6.3版本之前的添加认证需安装x-pack插件,6.3之后貌似去掉了这个. 1.安装x-pack 先切换到elastic用户下,在执行以下命令 $cd /data/elas ...

  7. k-means cluster images

    说明 慕课网上例子,使用k-means算法分类图片, 此处调试运行通过, 并添加包管理内容, 使得其他同学容易运行. 例子地址: https://github.com/fanqingsong/clus ...

  8. socket.io emit callback调用探秘

    socket.io https://socket.io/ https://socket.io/docs/ What Socket.IO is Socket.IO is a library that e ...

  9. MySQL学习13 - 索引

    一.索引的介绍 二 .索引的作用 三.常见的几种索引: 3.1 普通索引 3.2 唯一索引 3.3 主键索引 3.4 组合索引 四.索引名词 五.正确使用索引的情况 什么是最左前缀呢? 六.索引的注意 ...

  10. 多个div实现随意拖拽功能

    鼠标事件 mousedownmousemovemouseup注意事项:被拖动的div的position属性值一定是absolute.切记不可使用margin-top:10px;而应该使用top:10p ...