文档章节

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

IT追寻者
 IT追寻者
发布于 2016/06/17 14:19
字数 819
阅读 38
收藏 1
点赞 0
评论 0

之前在写网页的时候有一个展示图片的需求,我使用一个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追寻者

粉丝 23
博文 352
码字总数 50566
作品 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
html 兼容性问题及一些处理方法(1)

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

ShuenWang
06/26
0
0
CSS 兼容总结及面试问题

CSS 兼容总结及面试问题 +1、如何定义高度很小的容器? 原因:在IE6下无法定义小高度的容器,是因为有一个默认的行高。 解答:列举2种解决方案:overflow:hidden 或 line-height:0 +2、图片下...

南宫天明
2012/08/30
549
1
说几个容易遇到的css难题

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

closertb
2017/12/13
0
0
彻底搞定vertical-align垂直居中不起作用疑难杂症

原本我的文章标题是深入探讨line-height与vertical-align的疑难杂症,但这样似乎没能针对性的抛出一个问题,故改成“彻底搞定vertical-align垂直居中不起作用疑难杂症”。因此,本文讲解的还...

阿K1225
02/12
0
0
Css 浏览器兼容性及其其他常见问题

CSS IE10~11 透明滚动条 透明滚动条不占空间,显示时会覆盖内容 IE10~11 输入框多个叉号 点击叉号会清空输入框内容,会覆盖自己定制样式,可能不会富客户端框架的一些事件input::-ms-clear ...

sand_ant
2016/06/21
16
0
Jquery图片滚动插件—BxCarousel

Jquery图片滚动插件—BxCarousel BxCarousel是一个具有众多配置且易用的Jquery图片滚动插件,特征主要有: Ø 可以指定显示的元素数 Ø 可以指定每次滚动元素数 Ø 自动播放模式 Ø 前一张/...

灵动生活
2010/12/17
0
0
内容(content)、填充(padding)、边框(border)、边界(margin):CSS中盒子模型有何区别?

什么是CSS的盒子模式呢?为什么叫它是盒子?先说说我们在网页设计中常听的属性名: 内容(content)、填充(padding)、边框(border)、边界(margin),CSS盒子模式都具备这些属性。 一个盒子模型由...

sinat_34719507
2016/12/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Java8新特性之接口

在JDK8以前,我们定义接口类中,方法都是抽象的,并且不能存在静态方法。所有的方法命名规则基本上都是 public [返回类型] [方法名](参数params) throws [异常类型] {}。 JDK8为接口的定义带...

developlee的潇洒人生
25分钟前
0
0
aop + annotation 实现统一日志记录

aop + annotation 实现统一日志记录 在开发中,我们可能需要记录异常日志。由于异常比较分散,每个 service 方法都可能发生异常,如果我们都去做处理,会出现很多重复编码,也不好维护。这种...

长安一梦
35分钟前
1
0
将博客搬至CSDN

AHUSKY
47分钟前
1
0
Python web框架Django学习(1)

1.Django简介 (1)Python下有许多款不同的 Web 框架。Django是重量级选手中最有代表性的一位。许多成功的网站和APP都基于Django。Django是一个开放源代码的Web应用框架,由Python写成。 (2...

十年磨一剑3344
今天
0
0
Databook-数据之书

Databook-数据之书 用于数据分析的Jupyter Notebooks。 不需购买服务器,快速开始自己的数据分析过程。 源码:https://github.com/openthings/databook 作者:openthings,https://github.co...

openthings
今天
5
0
Python PIPEs

https://www.python-course.eu/pipes.php https://www.tutorialspoint.com/python/os_pipe.htm

zungyiu
今天
1
0
gRPC学习笔记

gRPC编程流程 1. proto文件定义 proto文件用于定义需要通过gRPC生成的接口,可以理解为接口定义文档 2. 通过构建工具生成服务基类代码-Maven或Gradle 3. 服务端开发 服务端实现类须实现通过构...

OSC_fly
今天
0
0
Docker Mac (三) Dockerfile 及命令

Dockerfile 最近学习docker的时候,遇到一件怪事,关于docker镜像可能会被破坏,还不知道它会有此措施 所以需要了解构建Dockerfile的正确方法 Dockerfile是由一系列命令和参数构成的脚本,这些命...

___大侠
今天
0
0
Android Studio+NDK+Cmake 移植FFmpeg-4.0.2命令行工具

一、编译 参考大神的帖子,亲测一次编译成功:https://blog.csdn.net/bobcat_kay/article/details/80889398 鉴于以前查文档的经验,这里附上编写例子的时间:2018年7月22日 我用的是ubantu,...

她叫我小渝
今天
0
0
mysql创建数据库

登录MYSQL mysql -u root -p 脚本创建数据库WeChat,并制定默认的字符集是utf8mb4。 CREATE DATABASE Wechat DEFAULT CHARSET utf8mb4 COLLATE utf8mb4_general_ci; 授权 grant all......

niithub
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部