摘要：变成块元素文章前部分讲到了只是对于内联元素而言，自己的给添加样式将其转为块元素自然间隙就会消失，不过这样也会产生一些副作用。
*{
padding: 0px;
margin: 0px;
}
.test{
border: 1px solid red;
width: 600px;
}
上述代码产生的效果如图所示，但是另人感到惊奇的是，img与div之间存在着一个间隙，这个间隙是怎么产生的？应该怎么解决？下面我们一点点的探寻这个问题背后的一些原理：
问题产生：这个问题产生主要是由于baseline造成的，先来了解下baseline，这是一个在英文的文字排版中体现比较明显的概念：
baseline只是在内联元素中才有的概念，在块元素中并没有这种概念，也就是说只有在ifc下才会有这一概念，并且内联元素的vertical-align的默认值就为baseline，也就是根据基线对齐。
对应着baseline还有两条标准线，分别为bottom和top，下面这张图说明了三条线所处的位置：
img是一内联元素，其根据baseline对齐，那条间隙就是baseline到bottom的距离，既然现在问题搞清楚了，下面就来解决它：
解决这个问题有4种方法（欢迎大家补充，我只想到这4种）：
line-height
给div.test添加样式line-height: 0px;就可以解决这个问题，这个原理很简单，因为line-height指的是bottom到top的距离，将其设置为0也就是代表着baseline与bottom之间的距离为0，自然那条间隙就消失啦；同理我们可以得出的就是指定font-size: 0px;也是可以解决，因为line-height在不指定时值默认为font-size * 一个系数(1.2 or other)，但是这种情况下不能有文字出现。
img变成块元素
文章前部分讲到了baseline只是对于内联元素而言，自己的给img添加样式display: block;将其转为块元素自然间隙就会消失，不过这样也会产生一些副作用。
给div.test添加height
这种方式比较简单那就让div.test只有图片那么高，这样也会有副作用，文字可能会移除，就像下图这样：
改变vertical-align
改变垂直对齐方式，比如指定vertical-align: bottomorvertical-align: toporvertical-align: middle，可以很完美的解决这个问题，但是产生的效果值得让人琢磨一番，下面就来解读下：
先来改下最开始的代码：
*{
padding: 0px;
margin: 0px;
font-size: 24px;
}
.test{
border: 1px solid red;
width: 600px;
margin: 10px 200px;
}
.test img{
vertical-align: top;
}
zp1996
效果如上图所示，可以发现的文字怎么跑到了上面去，这是什么鬼？只是改变了img的垂直对齐方式为什么会影响到span呢？
其实需要明白的是，不是img上去了，而是下去了，来分解下步骤解释下这个理论：
第一步就是形成上图这样的效果，第二步就是给div.test添加一个img标签，并且以top先对齐，所以就会产生有蜡笔小新的那个效果。
但是和实验室学长讨论时，学长说这个过程不符合dom顺序编译形成树的流程啊，一想对啊，难道不是这样吗？诶不对啊，img是置换元素，它需要依赖其src属性啊，而图片加载的过程会比较慢，不能等着加载图片而不去编译后面的代码吧，肯定是用异步加载的吧，这么想下上面拆分的那个过程是对的啊！到底浏览器真实的是不是这样的呢不得而知，但是从效果来看应该是这样的。
注: 这只是个人的一些想法，如有不对，欢迎指出
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111507.html
摘要：前言之前在写网页的时候有一个展示图片的需求我使用一个包裹一个但是在浏览器中预览的时候碰到了一下的问题仔细看图片和之间有间隙。正文指定了行内元素或表格单元格元素的垂直对齐方式摘录自。设置父元素字体大小为所用的值是无单位数值乘以元素的。 前言 之前在写网页的时候有一个展示图片的需求,我使用一个div包裹一个img,但是在浏览器中预览的时候碰到了一下的问题,showImg(https://s...
摘要：前言之前在写网页的时候有一个展示图片的需求我使用一个包裹一个但是在浏览器中预览的时候碰到了一下的问题仔细看图片和之间有间隙。正文指定了行内元素或表格单元格元素的垂直对齐方式摘录自。设置父元素字体大小为所用的值是无单位数值乘以元素的。 前言 之前在写网页的时候有一个展示图片的需求,我使用一个div包裹一个img,但是在浏览器中预览的时候碰到了一下的问题,showImg(https://s...
摘要：多个标签写在一行郁金香郁金香郁金香郁金香效果前效果后将要闭合标签的地方与开始标签的地方重合郁金香郁金香使用注释头尾相连郁金香郁金香在标签的父级上写推荐是用这个方法。1.多个标签写在一行 效果前： 效果后： 2.将要闭合标签的地方与开始标签的地方重合 3.使用注释头尾相连 4.在img标签的父级上写：font-size:0; 推荐是用这个方法。这...
摘要：二按照官方的提示解决了意思就是切到分支，自己的分支解决冲突，提交。这是和二相反向的操作页面标题无效的解决办法强类型转换的坑条件用正则返回的布尔值结果返回了条件结果也返回了。 2018/3/2 1,vue的{{}}怎么失效了项目使用了twig模板渲染 语法{{}}冲突，使用v-text v-html渲染 可以写表达式的写法 字符+变量 2，函数防抖节流封装实用的下拉加载更多代码demo...
摘要：索引需要占物理和数据空间。本质上就是把键值换算成新的哈希值，根据这个哈希值来定位。，索引列不能参与计算，尽量保持列干净。 前言 只有光头才能变强 索引和锁在数据库中可以说是非常重要的知识点了，在面试中也会经常会被问到的。 本文力求简单讲清每个知识点，希望大家看完能有所收获 声明：如果没有说明具体的数据库和存储引擎，默认指的是MySQL中的InnoDB存储引擎 一、索引 在之前，我对索...
阅读 2839·2023-04-25 18:06
阅读 2687·2021-11-24 09:38
阅读 2992·2021-11-22 09:34
阅读 2662·2021-08-12 13:30
阅读 1849·2019-08-30 15:44
阅读 1470·2019-08-30 13:09
阅读 1455·2019-08-30 12:45
阅读 1596·2019-08-29 11:13
