图片下方空白

2018-06-24 01:54:36来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

本文地址:http://www.cnblogs.com/veinyin/p/7606581.html 

 

如果将图片竖直向下排列,会发现图片上边框与下边框之间有一小块空白,这是因为图片对齐方式导致的。

HTML如下:

1 <div class="box">
2     <img src="images/logo.png" alt="">
3     <img src="images/logo.png" alt="">
4     <img src="images/logo.png" alt="">
5     <img src="images/logo.png" alt="">
6 </div>

CSS如下:

1 div{
2     padding: 20px;
3     background-color: #fff;
4     border: solid 1px #666666;
5 }
6 img{
7     border: solid 1px #666;
8 }

上面CSS是想将图片加上边框,然后竖直紧贴排下来,但效果如下所示

解决方案

1 img{
2    display: block;
3    vertical-align: top;
4    border: solid 1px #666;
5 }

给图片设置第 2 行或第 3 行均可,不用都写,实在懒,放在一起给了,都可以达到下面的效果

 

修正

由于采用上面方法一直未出现问题,故一些问题没考虑到。

感谢@孑孓子指出考虑不周之处,现将上面方法修改如下:

1 img{
2     display: block;
3     /* vertical-align: top; */
4     border: solid 1px #666;
5 }
6 
7 .box{
8     font-size: 0;
9 }

 

over~

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:元素垂直水平居中

下一篇:css动画-模拟正余弦曲线