img的间隙

妤锋シ发布于2019-08-29 11:13 / 1674人阅读

摘要：变成块元素文章前部分讲到了只是对于内联元素而言，自己的给添加样式将其转为块元素自然间隙就会消失，不过这样也会产生一些副作用。

*{
    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，可以很完美的解决这个问题，但是产生的效果值得让人琢磨一番，下面就来解读下：

理解vertical-align

先来改下最开始的代码：

*{
    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属性啊，而图片加载的过程会比较慢，不能等着加载图片而不去编译后面的代码吧，肯定是用异步加载的吧，这么想下上面拆分的那个过程是对的啊！到底浏览器真实的是不是这样的呢不得而知，但是从效果来看应该是这样的。

注: 这只是个人的一些想法，如有不对，欢迎指出

GPU云服务器云服务器获取img的src js 获取img的图片数据服务器上的图片img 最大间隙

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111507.html

CSS学习笔记－图片img与父元素div之间的间隙解决

摘要：前言之前在写网页的时候有一个展示图片的需求我使用一个包裹一个但是在浏览器中预览的时候碰到了一下的问题仔细看图片和之间有间隙。正文指定了行内元素或表格单元格元素的垂直对齐方式摘录自。设置父元素字体大小为所用的值是无单位数值乘以元素的。前言之前在写网页的时候有一个展示图片的需求,我使用一个div包裹一个img,但是在浏览器中预览的时候碰到了一下的问题,showImg(https://s...

Chiclaim 2019-08-30 12:44 评论0 收藏0
多个Img标签之间的间隙处理方法

摘要：多个标签写在一行郁金香郁金香郁金香郁金香效果前效果后将要闭合标签的地方与开始标签的地方重合郁金香郁金香使用注释头尾相连郁金香郁金香在标签的父级上写推荐是用这个方法。1.多个标签写在一行效果前：效果后： 2.将要闭合标签的地方与开始标签的地方重合 3.使用注释头尾相连 4.在img标签的父级上写：font-size:0; 推荐是用这个方法。这...

firim 2019-04-23 13:21 评论0 收藏0
踩坑日记(持续更新...)

摘要：二按照官方的提示解决了意思就是切到分支，自己的分支解决冲突，提交。这是和二相反向的操作页面标题无效的解决办法强类型转换的坑条件用正则返回的布尔值结果返回了条件结果也返回了。 2018/3/2 1,vue的{{}}怎么失效了项目使用了twig模板渲染语法{{}}冲突，使用v-text v-html渲染可以写表达式的写法字符+变量 2，函数防抖节流封装实用的下拉加载更多代码demo...

taoszu 2019-08-22 15:00 评论0 收藏0