在网页设计中,图片是不可缺少的素材,但是在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、设