【盲目分析系列】为什么img与img之间不能过度亲密

这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战。

前言

说：为什么img之间总是有间隔，横向或者纵向上的，都不能靠在一起，显得亲密点。

应领导要求，来盲目分析一波。

问题

先来看看问题。如图。html结构很简单，就是一个父盒子div里套了很多小黄鸭img，还有一些文字。

很明显，每个小黄鸭img都不能与周围的小黄鸭亲密接触，乃至周围文字也不行。

现在领导要求小黄鸭睡在一起。

分析

小别致img

MDN的原话：img是一个可替换元素。它的 display 属性的默认值是 inline，但是它的默认分辨率是由被嵌入的图片的原始宽高来确定的，使得它就像** inline-block** 一样。

翻译翻译：img是行内元素——（内联元素宽高无效，不换行）

但又不完全是——哎，设置宽高是有效的，还会影响分辨率。

原话：img 没有基线（baseline），这意味着，当在一个行内格式的上下文（an inline formatting context）中使用 vertical-align: baseline 时，图像的底部将会与容器的文字基线对齐。

翻译：基线，就是基友与普通朋友的边界线（当然不是）。

基线

有句俗话：虽然人的xp是不同的，但我还是建议你去看下医生。

这个xp就足以解释基线。仔细看x的底端比p的低端高。x的底端就是基线。

来看下面这个字帖，老实说写得不咋地。

一行四线中从上往下数：第三根线就是为基线baseline 。

vertical-align还有bottom和top：但并不是第一根线和最下的线。我盲目猜测应该是行高的顶与底。这个东西很复杂，想要深入了解的可以看这篇文章

由于父div默认为文字基线对齐vertical-align: baseline ，所以img也这样，而baseline与bottom之间有小段距离，这段距离便导致了img垂直缝隙间隔。

可以试着增大父元素fontsize，空隙还会变大。

垂直缝隙解决方法

0. img设置css display：block；

   • 原理：改变了display，变成块级元素。
   • 缺点：很明显，换行了，一行只有一个图了

1. div 设置font-size:0px;

   • 原理：文字大小为了，基线到bottom的距离也变成了0，所以缝隙没了，包括水平
   • 缺点：文字也没淦没了。。。。。

2. div 设置display:flex；flex-direction:column;

   • 原理：不清楚，应该是flex布局的特性
   • 缺点：变单行，img大小放飞自我了，有点脑淤血才做才这样处理吧

3. img设置float:left

   • 原理：float起飞；文本开始环绕文字
   • 缺点：呃，要清除浮动，还有就是你可能不想它起飞。

4. img 设置vertical-align: bottom;或者top

   • 原理：改变对齐方式
   • 缺点：行高不能大于img的高度，仍在会存在空隙

水平间隙这么来的？

这是html的问题，试想一下当你写完了代码，右键，选择格式化文档。

vscode已经给你排版得飘飘亮亮，like this

<div>
    <img src='' alt=''>
    <img src='' alt=''>
</div>
复制代码

实际上，上诉每次换行都会产生一个textNode。关于空白结点：有兴趣的可以看这篇大佬的文章。

不仅是换行，空格也会形成文本结点，而且多个换行和空格只会产生一个空结点，使得img水平间隔一个空格的距离。

那么问题来了，为什么第一个空结点没有在第一个img左边显示出来？。

盲目分析可能是甲鱼的臀部：龟腚 ，行内第一个空结点不显示，毕竟也不需要在第一元素之前间隔。

有知道的大佬可以评论告知。

水平间隙消除方法

0. 手动删除换行和空格；

<div>
    <img src='' alt=''><img src='' alt=''>
</div>
复制代码

• 原理：物理上解决问题。
• 缺点：你可能会变得无聊

2. div 设置font-size:0px;

• 原理：同上，文字结点不显示了
• 缺点：同上，淦没了。。。。。

3. div 设置letter-spacing:-800px;

• 原理：同2
• 缺点：同2

4. div 设置 word-spacing:-0.3em

   • 原理：直接设置标签与文本间隔，文本与文本间隔
   • 缺点：真实到2个单词连在一起变一个，甚至重叠

5. img 设置 margin-left:-0.3em

   • 原理：定位了
   • 缺点：麻烦，每行第一个图还得特殊处理。

结论

别把文字和img写成同级，直接fontsize：0；解决一切烦恼。

要么就vertical-align: bottom;然后物理删除回车。

你可以在我的codepen上尝试上述各种方案

如有错误敬请指正。