文档章节

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

IT追寻者
 IT追寻者
发布于 2016/06/17 14:19
字数 819
阅读 46
收藏 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追寻者

粉丝 26
博文 368
码字总数 55427
作品 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

没有更多内容

加载失败,请刷新页面

加载更多

升压变换器 Boost

工作特点 输入输出极性相同。 开关管 MOS 和负载构成并联,在MOS 导通时,电流通过 L 滤波,电源对 L 充电。 当 MOS 断开时,L 向负载及电源放电,输出电压将是 Ui+U L ,达到升压的目的。 ...

colinux
27分钟前
1
0
OSChina 周一乱弹 —— 你狗命在我手上

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 小小编辑:推荐歌曲,《I.W.A.B.N》- Lil Ghost 《I.W.A.B.N》- Lil Ghost 手机党少年们想听歌,请使劲儿戳(这里) 几天没见, 大王(@罗马的...

小小编辑
29分钟前
169
6
轻量级 memcached缓存代理 twemproxy实践

本文内容脑图如下: 文章共 533字,阅读大约需要 2分钟 ! 概 述 twemproxy(nutcracker) 是 Twitter开源的轻量级 memcached / redis 代理服务器,本质就是一个集群管理工具,主要用来弥补 ...

CodeSheep
49分钟前
7
0
Apache日志不记录访问静态文件,访问日志切割,静态元素过期时间设置

Apache配置不记录访问静态文件的日志 网站大多元素为静态文件,如图片、css、js等,这些元素可以不用记录 vhost原始配置 <VirtualHost *:80> ServerAdmin test@163.com DocumentRoo...

野雪球
今天
3
0
聊聊storm的ICommitterTridentSpout

序 本文主要研究一下storm的ICommitterTridentSpout ICommitterTridentSpout storm-core-1.2.2-sources.jar!/org/apache/storm/trident/spout/ICommitterTridentSpout.java public interface......

go4it
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部