img的间隙

这里写图片描述

*{
    padding: 0px;
    margin: 0px;
}
.test{
    border: 1px solid red;
    width: 600px;
}
<div class="test">
    <img src="test.jpg" />
</div>

上述代码产生的效果如图所示,但是另人感到惊奇的是,imgdiv之间存在着一个间隙,这个间隙是怎么产生的?应该怎么解决?下面我们一点点的探寻这个问题背后的一些原理:

问题产生:

这个问题产生主要是由于baseline造成的,先来了解下baseline,这是一个在英文的文字排版中体现比较明显的概念:
这里写图片描述
baseline只是在内联元素中才有的概念,在块元素中并没有这种概念,也就是说只有在ifc下才会有这一概念,并且内联元素的vertical-align的默认值就为baseline,也就是根据基线对齐。
对应着baseline还有两条标准线,分别为bottomtop,下面这张图说明了三条线所处的位置:
这里写图片描述
img是一内联元素,其根据baseline对齐,那条间隙就是baselinebottom的距离,既然现在问题搞清楚了,下面就来解决它:

解决问题:

解决这个问题有4种方法(欢迎大家补充,我只想到这4种):

  • line-height
    div.test添加样式line-height: 0px;就可以解决这个问题,这个原理很简单,因为line-height指的是bottomtop的距离,将其设置为0也就是代表着baselinebottom之间的距离为0,自然那条间隙就消失啦;同理我们可以得出的就是指定font-size: 0px;也是可以解决,因为line-height在不指定时值默认为font-size * 一个系数(1.2 or other),但是这种情况下不能有文字出现。

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

  • div.test添加height
    这种方式比较简单那就让div.test只有图片那么高,这样也会有副作用,文字可能会移除,就像下图这样:

clipboard.png

  • 改变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;
}
<div class="test">
    <img src="test.jpg" />
    <span>zp1996<span>
</div>

clipboard.png

效果如上图所示,可以发现的文字怎么跑到了上面去,这是什么鬼?只是改变了img的垂直对齐方式为什么会影响到span呢?
其实需要明白的是,不是img上去了,而是下去了,来分解下步骤解释下这个理论:

clipboard.png
第一步就是形成上图这样的效果,第二步就是给div.test添加一个img标签,并且以top先对齐,所以就会产生有蜡笔小新的那个效果。
但是和实验室学长讨论时,学长说这个过程不符合dom顺序编译形成树的流程啊,一想对啊,难道不是这样吗?诶不对啊,img是置换元素,它需要依赖其src属性啊,而图片加载的过程会比较慢,不能等着加载图片而不去编译后面的代码吧,肯定是用异步加载的吧,这么想下上面拆分的那个过程是对的啊!到底浏览器真实的是不是这样的呢不得而知,但是从效果来看应该是这样的。

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


zp的笔记
一些个人笔记

coder

3.2k 声望
64 粉丝
0 条评论
推荐阅读
nodejs源码—初始化
相信很多的人,每天在终端不止一遍的执行着node这条命令,对于很多人来说,它就像一个黑盒,并不知道背后到底发生了什么,本文将会为大家揭开这个神秘的面纱,由于本人水平有限,所以只是讲一个大概其,主要关注...

zp199618阅读 3.7k

【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan21阅读 1.6k评论 1

封面图
那些不用js也能实现的效果
本文首发于公众号:GitWeb,欢迎关注,接收首发推文本文列举几个不需要使用js也能实现的效果一、页面回到顶部回到顶部是页面开发中很常见的一个功能,一般的做法是对回到顶部组件做一个监听,当用户点击的时候,...

Winn11阅读 1.1k评论 6

封面图
Three.js 进阶之旅:全景漫游-初阶移动相机版
3D 全景技术可以实现日常生活中的很多功能需求,比如地图的街景全景模式、数字展厅、在线看房、社交媒体的全景图预览、短视频直播平台的全景直播等。Three.js 实现全景功能也是十分方便的,当然了目前已经有很多...

dragonir12阅读 1.5k

封面图
巧用 CSS 变量,实现动画函数复用,制作高级感拉满的网格动画
这里我们借助了上面 #12、结构性伪类 中的 :root{ } 伪类,在全局 :root{ } 伪类中定义了一个 CSS 变量,取名为 --bgColor 。

chokcoco11阅读 2.9k

封面图
突发奇想!借助CSS自定义彩色字体来实现多行文本展开收起
之前写过这样一篇文章:CSS 实现多行文本“展开收起”,介绍了一些纯 CSS 实现多行文本展开收起的小技巧,特别是右下角的“展开收起”按钮,用到了浮动布局,非常巧妙,有兴趣的可以回顾一下。

XboxYan9阅读 1.2k

封面图

coder

3.2k 声望
64 粉丝
宣传栏