图片下方空白
2018-06-24 01:54:36来源:未知 阅读 ()
本文地址: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动画-模拟正余弦曲线
- css:背景(背景颜色、图片、平铺、背景固定、背景颜色半透 2020-06-01
- CSS背景图片的6个有趣的技巧 2020-05-12
- HTML连载84-添加中部的图片 2020-04-21
- 11.行盒垂直对齐和图片的底部白边问题 2020-04-17
- 1.图片元素<img>和<map>的联用 2020-04-07
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash