解决img标签上下出现间隙的方法
|
我们在泛泛的开拓进程中，常常必要行使多张图片，而行使多张图片的时辰，我们一样平常会去行使一个列表来对我们的img 举办承装。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> img{ height: 200px; margin: 0; padding: 0; border-bottom: 1px solid red; } ul{ border: 1px solid blue; list-style: none; padding: 0; margin: 0; } </style> </head> <body> <ul> <li> <img src=http://www.jb51.net/html5/"lipeng.png"> </li> </ul> </body> </html> 可是这个时辰我们发明白一个题目，为什么我的图片下面多出来一条线呀？
这是怎么回事呀？ 我不是已经把 img 的外边距和内边距什么的所有清空了么？ 现实上，这着实是inline元素搞的鬼。 任何不是块级元素的可见元素都是内联元素，其示意的特征是“行机关”情势。----《CSS势力巨子指南》 什么意思？ 意思就是，着实如图片笔墨等内联元素，它默认对齐方法都是和它的父级的 baseline 去举办对齐的，可是你对齐的是 baseline，撑开高度的却是元素整体的高度（bottom line），这样必定就会造成必然的间隙，也就是我们上文呈现的题目了。
那我们既然知道了这个题目呈现的缘故起因，那么办理起来也就简朴多啦。 1.第一种办理方案 既然是 inline 元素才会产生这个题目，那我们天然可以简朴粗暴的办理这个题目，那就是给我们的元素“变本性”，让它从 inline 变为 block 不就可以了么？ <style type="text/css"> img{ height: 200px; margin: 0; padding: 0; border-bottom: 1px solid red; display: block; } ul{ border: 1px solid blue; list-style: none; padding: 0; margin: 0; } </style> 2.第二种办理方案 这也太粗暴了，变了性别，转头还怎么舒畅的玩耍呀，以是我们要实行曲线救活，我们可以去修改一下它的垂直对齐方法呀，这样是不是就可以了呢？ <style type="text/css"> img{ height: 200px; margin: 0; padding: 0; border-bottom: 1px solid red; vertical-align: middle; } ul{ border: 1px solid blue; list-style: none; padding: 0; margin: 0; } </style> 可以看出，这样也可以实现想要的结果。 缘故起因在于，vertical-align 的默认属性就是 baseline ，我们只要配置了跟 baseline 纷歧样的属性，都可以停止这个题目。
3.第三种办理方案 可是修改了对齐方法，这样也有也许会造成题目呀，我们可不行以去让这个元素飘起来呢？既然你已经不在当前文档流中了，你机关的时辰天然也就不会参照这个笔墨去举办对齐了呀。 我们可以去行使浮动。 <style type="text/css"> img{ height: 200px; margin: 0; padding: 0; border-bottom: 1px solid red; float: left; } ul li { overflow: hidden; } ul{ border: 1px solid blue; list-style: none; padding: 0; margin: 0; } </style> 这样也可以办理这个题目，可是请留意，“浮动虽好，可不要贪杯呦”。 你必然要可以或许正确的办理浮动所造成的影响，并且若是你本来就规划去做笔墨环抱结果，那么行使浮动必然是你的不二选择。 4.第四种办理方案 若是上面几种方案全都不能办理你的题目，那么只有祭出我的大杀器了。 你可以给你的父元素把笔墨巨细设成0。 <style type="text/css"> img{ height: 200px; margin: 0; padding: 0; border-bottom: 1px solid red; } ul li { font-size: 0px; } ul{ border: 1px solid blue; list-style: none; padding: 0; margin: 0; } </style> 既然你是按照 笔墨的基线去对齐，我直接把笔墨给你设没了，这样你就没法定位了吧，可是这种做法，只保举在你已经“急头白脸死活弄不出来”的时辰才去行使的。 总结 好了，以上就是对这个题目的四种办理方案，但愿看到此文的小搭档往后都能跳出这个坑啦。假若有疑问各人可以留言交换。 （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
