添加关注
如何解决 img 标签上下出现的间隙
0.前言
我们在平常的开发过程中，经常需要使用多张图片，而使用多张图片的时候，我们一般会去使用一个列表来对我们的img 进行承装。
Documentimg{height:200px;margin:0;padding:0;border-bottom:1pxsolid red; }ul{border:1pxsolid blue;list-style:none;padding:0;margin:0; }
但是这个时候我们发现了一个问题，为什么我的图片下面多出来一条线呀？
Paste_Image.png
这是怎么回事呀？
我不是已经把 img 的外边距和内边距什么的全部清空了么？
实际上，这其实是inline元素搞的鬼。
任何不是块级元素的可见元素都是内联元素，其表现的特性是“行布局”形式。
----《CSS权威指南》
什么意思？
意思就是，其实如图片文字等内联元素，它默认对齐方式都是和它的父级的 baseline 去进行对齐的，但是你对齐的是 baseline，撑开高度的却是元素整体的高度（bottom line），这样肯定就会造成一定的间隙，也就是我们上文出现的问题了。
Paste_Image.png
那我们既然知道了这个问题出现的原因，那么解决起来也就简单多啦。
1.第一种解决方案
既然是 inline 元素才会发生这个问题，那我们自然可以简单粗暴的解决这个问题，那就是给我们的元素“变个性”，让它从 inline 变为 block 不就可以了么？
img{height:200px;margin:0;padding:0;border-bottom:1pxsolid red;display:block; }ul{border:1pxsolid blue;list-style:none;padding:0;margin:0; }
2.第二种解决方案
这也太粗暴了，变了性别，回头还怎么愉快的玩耍呀，所以我们要尝试曲线救活，我们可以去修改一下它的垂直对齐方式呀，这样是不是就可以了呢？
img{height:200px;margin:0;padding:0;border-bottom:1pxsolid red;vertical-align:middle; }ul{border:1pxsolid blue;list-style:none;padding:0;margin:0; }
可以看出，这样也可以实现想要的效果。
原因在于，vertical-align 的默认属性就是 baseline ，我们只要设置了跟 baseline 不一样的属性，都可以避免这个问题。
--
baseline默认。元素放置在父元素的基线上。
sub垂直对齐文本的下标。
super垂直对齐文本的上标
top把元素的顶端与行中最高元素的顶端对齐
text-top把元素的顶端与父元素字体的顶端对齐
middle把此元素放置在父元素的中部。
bottom把元素的顶端与行中最低的元素的顶端对齐。
text-bottom把元素的底端与父元素字体的底端对齐。
length
%使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit规定应该从父元素继承 vertical-align 属性的值。
3.第三种解决方案
但是修改了对齐方式，这样也有可能会造成问题呀，我们可不可以去让这个元素飘起来呢？既然你已经不在当前文档流中了，你布局的时候自然也就不会参照这个文字去进行对齐了呀。
我们可以去使用浮动。
img{height:200px;margin:0;padding:0;border-bottom:1pxsolid red;float:left; }ulli{overflow:hidden; }ul{border:1pxsolid blue;list-style:none;padding:0;margin:0; }
这样也可以解决这个问题，但是请注意，“浮动虽好，可不要贪杯呦”。
你一定要能够正确的解决浮动所造成的影响，而且假如你原本就打算去做文字环绕效果，那么使用浮动一定是你的不二选择。
4.第四种解决方案
假如上面几种方案全都不能解决你的问题，那么只有祭出我的大杀器了。
你可以给你的父元素把文字大小设成0。
img{height:200px;margin:0;padding:0;border-bottom:1pxsolid red; }ulli{font-size:0px; }ul{border:1pxsolid blue;list-style:none;padding:0;margin:0; }
既然你是根据 文字的基线去对齐，我直接把文字给你设没了，这样你就没法定位了吧，但是这种做法，只推荐在你已经“急头白脸死活弄不出来”的时候才去使用的。
好啦，今天对这个问题已经说明四种解决方案，希望看到此文的小伙伴以后都能跳出这个坑啦。
2016年07月08日15:58:43
李鹏
读者老爷，如果您觉得还不错，就赏小的一口吃的吧。 么么哒
16
×
喜欢的用户
净化心灵ing2016.08.15 00:31
Celinda月兒2016.08.10 21:05
HappyBrother1692016.08.06 07:57
0切归零2016.07.18 21:23
白米饭2016.07.10 13:28
HenryHuang2016.07.10 11:45
嘿七2016.07.10 00:27
x39272016.07.10 00:19
豪哥DvWooooo2016.07.09 22:37
千金裘2016.07.09 08:11
Monty丶2016.07.08 20:03
赵缀空2016.07.08 20:00
雨砾2016.07.08 16:40
冬天徘徊2016.07.08 16:15
伯纳乌的倾听2016.07.08 16:01
2 楼 ·2016.07.08 15:59
谁最帅呀，我最帅
3 楼 ·2016.07.08 16:03
板凳
4 楼 ·2016.07.08 16:08
5 楼 ·2016.07.08 16:40
蹲坑
Ctrl+Enter 发表
被以下专题收入，发现更多相似内容：
玩转简书的第一步，从这个专题开始。 想上首页热门榜么？好内容想被更多人看到么？来投稿吧！如果被拒也不要灰心哦～入选文章会进一个队...
95236篇文章· 126651人关注
爱前端，在路上，希望结伴而行。
1156篇文章· 4013人关注
干货技术文。
1752篇文章· 3321人关注
网友评论