本文介绍了在网页设计中遇到的图片在div内下方出现空白像素的问题，分析了原因并提供了五种解决方案，包括设置图片display属性为block、调整垂直对齐方式、改变父对象宽高、图片浮动以及设置父对象文字大小为0px。建议使用设置display:block的方法，同时提到了在图文混排中的应用和注意事项。
在网页设计中，图片是不可缺少的素材，但是在div标签里面放入img图片的话，有时候会在图片的下方出现一行空间的区域，如果单纯的图片不醒目或是图片所在的位置不重要的话，我们可以不去理会，但是做为一个完美型的页且不太会前端的我来说，出现这个问题是忍无可忍的，马上上百度查资料，干掉它。
图片下面出现的空白像素
比如下面的一段HTML图片加载的代码
这段代码，在网页中显示时，会在图片的下方出现一行空间的像素空间。
如下图，箭头所示的一样，整张图片的底部与边框有着与其它三个边框有着，不同宽度的像素空白。
这个网页图片下面出现空白像素的问题该如何解决呢？
网页图片下面出现空间像素的原因
在HTML5与CSS3中，DIV标签中的图片也就是IMG标签的默认vertical-align属性为baseline，而这个baseline在css2的文档中有这么一句解释，翻译过来也就是一个inline-block元素，如果里面没有inline元素，或者overflow不是visible，则该元素的基线就是其margin底边缘，否则，其基线就是元素里面最后一行内联元素的基线。图片下方空白像素解决方法
1、将图片转换为块级对象可去掉下边空白
给图片单独设置或添加一个display属性，如下方代码display:block;
示例代码img {display:block;}
2、设
最低0.47元/天 解锁文章
130
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
