HTML中的幽灵节点

块状元素在只包含一张图片时底部会有不知名的空白。

问题分析：

在HTML5文档声明中，内联元素的所有解析和渲染如同每个行框盒子前面有一个空白的节点，这个空白节点不占据任何宽度、也没有办法通过脚本获得，还是个透明的节点（幽灵节点）。但是只有在HTML5中使用<!DOCTYPE html>的时候才会有。
根据上面所说空白节点就是图片前面有一个看不到的内容，既然是内容默认就采用vertical-algin:baseline对齐。图片是行内块状元素默认基线是图片底部。这个时候就会出现一个问题。有内容就有内容盒子，有内容盒子就有内容区域、上半行间距、下半行间距。

解决方法：

方法一：

将图片改为底部、顶部、middle对齐。

<!DOCTYPE html>
<html><head><style>div {border: 1px solid red;}img {/*vertical-align:top;*//*vertical-align:middle;*/vertical-align: bottom;}</style>
</head><body><div>x<img src="./1117.jpg" /></div>
</body></html>

方法二：

将图片改为块状元素，将其块状化。

<!DOCTYPE html>
<html><head><style>div {border: 1px solid red;}img {display: block;}</style>
</head><body><div><img src="./1117.jpg" /></div>
</body></html>

HTML中的幽灵节点相关推荐

eureka 之前的服务如何关闭_Eureka 中的幽灵
Eureka 是 Spring Cloud Netflix 的服务注册与发现工具.一般情况下,它都能很好的工作,但有时却会出现一些匪夷所思的情况.今天我们就来研究一下不当的配置导致的幽灵服务. 幽灵出 ...
删除单链表中的重复节点(c语言版本)
这是一道经典的面试题,下面是我的研究和举一反三,特整理如下: 分为三种情形: (1)删除有序链表的重复节点,重复节点一个都不留 (2)删除有序链表的重复节点,重复节点只留一个 (3)删除无序链表的重复 ...
使用Blender中的几何节点创建程序对象
大小解压后:2.4G 持续时间3h 30m 1280X720 MP4 语言:英语+中英文字幕(根据原英文字幕机译更准确) 使用Blender中的几何节点按程序创建对象信息: 使用Blender中的几 ...
Nat. Mach. Intell. | 基于深度强化学习寻找网络中的关键节点
今天给大家介绍哈佛大学Yang-Yu Liu课题组和加利福尼亚大学洛杉矶分校Yizhou Sun课题组发表在nature machine intelligence上的一篇文章"Finding ...
编写代码，移除未排序的链表中的重复节点
2019独角兽企业重金招聘Python工程师标准>>> 解法一:如果不得使用临时缓冲区,该怎么解决? 要想移除链表中的重复节点,我们需要设法记录有哪些是重复的.这里只需要使用到一个简 ...
Linux文件系统中的inode节点详细介绍
一.inode是什么? 理解inode,要从文件储存说起. 文件储存在硬盘上,硬盘的最小存储单位叫做"扇区"(Sector).每个扇区储存512字节(相当于0.5KB). 操作系统 ...
求一颗二叉树中两个节点的最低公共父节点
题目:求一棵二叉树中两个节点的最低公共父节点思路:递归和非递归 public static TreeNode getLastCommonParentRec(TreeNode root, Tree ...
zTree实现单独选中根节点中第一个节点
zTree实现单独选中根节点中第一个节点 1.实现源代码 <!DOCTYPE html> <html> <head><title>zTree实现基本树& ...
【Groovy】自定义 Xml 生成器 BuilderSupport ( setParent 方法中设置父节点与子节点关系 )
文章目录一.setParent 方法中设置父节点与子节点关系二.完整代码示例 1.MyBuilderSupport 生成器代码 2.使用 MyBuilderSupport 生成器创建 Xml 代码 ...

HTML中的幽灵节点

HTML中的幽灵节点相关推荐

最新文章

热门文章