文档章节

图片img与父元素div之间的间隙解决

IT追寻者
 IT追寻者
发布于 2016/06/17 14:19
字数 819
阅读 42
收藏 1

之前在写网页的时候有一个展示图片的需求,我使用一个div包裹一个img,但是在浏览器中预览的时候碰到了一下的问题,

仔细看,图片和div之间有间隙。
下面贴上简易的代码

<div class="content">
        <img src="./img/user.jpg">
</div>
.content{
    float:left;
    margin:100px auto; 
    background:pink;
}

我外层容器content设置浮动,按浮动元素会收缩的原理,本不应该出现这条粉色的间隙,但为什么这里会有呢?之后去网上查了一下,其中涉及到了line-height以及vertical-align的问题。

正文

  • vertical-align

    vertical-align 指定了行内(inline)元素或表格单元格(table-cell)元素的垂直对齐方式(摘录自MDN)。

vertical-align的取值中有top、middle、baseline、bottom四个值,他们分别对应了

橙色:top、粉色:middle、蓝色:baseline、绿色:bottom(手工做图,略丑,客官莫喷。


vertical-align中默认值是baseline也就是说图片的下边缘其实是和蓝色那条线对齐的,而文字元素<span>本身也有高度,所以会多出那么一部分空白的地方,也就是底部绿色线到蓝色线之间的距离。

那么为什么在没有文字的情况下图片也会有底部的间隙,那是因为在HTML5文档声明下,块状元素内部的内联元素的行为表现,就好像块状元素内部还有一个(更有可能两个-前后)看不见摸不着没有宽度没有实体的空白节点(摘录自张鑫旭的博客),所以默认vertical-align为baseline的图片会和父div之间存在空隙。

知道这一点,现在问题就好解决了,最直接的可以是

设置img标签的vertical-align
img{
    vertical-align:bottom;//middle和top也都可以
}
设置img标签display:block

前面正文的开头说过vertical-align是设置行内(inline)元素或表格单元格(table-cell)元素的垂直对齐方式,所以设置img为块级元素时就不会存在baseline对齐的问题了。

img{
    display:block
}
设置父元素div字体大小为0
.content{
    float:left;
    margin:100px auto; 
    background:pink;
    font-size:0px;
}

<number>
The used value is this unitless <number> multiplied by the element's font size. The computed value is the same as the specified <number>
. In most cases this is the preferred way to set line-height
with no unexpected results in case of inheritance.
所用的值是无单位数值<number> 乘以元素的font size。计算出来的值与使用数值指定的一样。大多数情况下,使用这种方法设置line-height是首选方法,在继承情况下不会有异常的值。 (摘录自MDN)

line-height在不设置单位时是通过与font-size相乘来计算的,设置font-size为0,line-height也为0,而那一端多余的间隙(baseline和bottom之间的差值)也和line-height有关,所以自然而然间隙就消除了。

结尾

这是我解决img与父div空隙中的一点总结,其实深挖了line-height和vertical-align还有更多的内容,我一下子消化不过来,今天先到这里,日后有更深入了解了再慢慢补充,以上内容有错误的地方欢迎小伙伴们来拍砖。

本文转载自:https://segmentfault.com/q/1010000004391865/a-1020000004435459

共有 人打赏支持
IT追寻者

IT追寻者

粉丝 24
博文 358
码字总数 52748
作品 0
海淀
高级程序员
line元素img出现默认间隙用vertical-align解决

父级设置了line-height,内联元素img也受影响;因为它本身属性有宽高,故可正常显示图片;但是在图片下方会出现一个间隙。如下所示: 是由于该元素默认垂直对齐方式为以父元素的baseline,但...

dqy95
2017/11/01
0
0
细数那些不能直视的IE6BUG

li在IE中底部3像素的BUG 解决方案:在<li>上加float:left;即可解决 2. IE6中奇数宽高的BUG。 解决方案:就是将外部相对定位的div宽度改成偶数。高度也是一样的。 3. IE6文字溢出BUG 引发这种...

_大雁
2013/06/09
0
5
inline-block 去除间隙

inline-block元素在布局时会给我们带来很多方便,但它有一个明显的bug,就是inline-block元素间会有一个4px的间隙(有的浏览器可能是8px)。 如图所示: 解决办法: 给父元素设置font-size:0...

拉普拉斯婷
2016/08/17
15
0
说几个容易遇到的css难题

最近看到一篇20 个CSS高级技巧汇总的汇总,感触很深,不过我想,与技巧相比,有些常见css布局难题,有时候更加让我们的日常开发变得踌躇沮丧吧。 在写这一篇文章之前,自己还写过一篇:我所不...

closertb
2017/12/13
0
0
html 兼容性问题及一些处理方法(1)

兼容性问题: 计算一定要精确 要要让内容的宽度超出我们设置的宽高,在IE6下,内容会撑开设置好的宽高;; 在IE6元素浮动,如果宽度需要内容撑开,就给里面的块元素都加浮动; 在IE6,7下元素...

ShuenWang
06/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

主流的消息队列MQ比较,详解MQ的4类应用场景

目前主流的MQ 1.ZeroMQ 号称最快的消息队列系统,尤其针对大吞吐量的需求场景。 扩展性好,开发比较灵活,采用C语言实现,实际上只是一个socket库的重新封装,如果做为消息队列使用,需要开发...

游人未归
40分钟前
2
0
React 服务器渲染原理解析与实践

网盘下载地址 React 服务器渲染原理解析与实践 本套课程,讲解了React中SSR技术的整个搭建思路及流程,完整的从原理上讲清楚了SSR的概念,重点在于讲解编写SSR框架遇到的各种知识点,以及细节...

qq__2304636824
今天
2
0
Jenkins使用

clean install -Dmaven.test.skip=true

1713716445
今天
1
0
多线程

1. 多线程概念。并发和并行的概念。 多线程指的是一段时间内cpu同时执行多个线程。一个程序至少运行>=1个进程,进程就是运行中的程序,而一个进程至少运行>=1个线程,线程是操作系统能调度的...

鱼想吃肉
今天
3
0
HBase 表修复在线方式和离线方式

一、在线修复 1.1 使用检查命令 $ ./bin/hbase hbck 该命令可完整修复 HBase 元数据信息;存在有错误信息会进行输出; 也可以通过如下命令查看详细信息: $ ./bin/hbase hbck -details 1.2 ...

Ryan-瑞恩
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部