Heim  >  Artikel  >  Web-Frontend  >  图片下面出现空白怎么解决_html/css_WEB-ITnose

图片下面出现空白怎么解决_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:31:254175Durchsuche

图片下面出现空白怎么解决:
在网页布局中可能会遇到这样的问题,那就是在图片的下面会出现空白,这种现象一般只会在IE6浏览器中出现,不过在火狐下也有可能会出现,这种现象在很多情况下都会严重影响网页的美观度,下面就介绍一下如何消除此种现象。
解决方案一:
图片下面出现空白怎么解决_html/css_WEB-ITnose转换为块级元素,例如:

 

img {display:block;}

 

以上方式可以解决此问题。
解决方案二:
使用vertical-align属性来实现此效果,例如:

 

img {vertical-align:top;}

 

解决方案三:
将图片的父元素的字体大小设置为0也可以实现此效果,例如:

 

.box{font-size:0px;}

 

以上代码中,将图片的父元素的字体大小设置为0px。
解决方案四:
为父元素添加overflow:hidden属性,例如:

 

.box{overflow:hidden}

 

解决方案五:
删除图片后面的换行或者空格之类的东西也可以实现此效果。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=9496

更多内容可以参阅:http://www.softwhy.com/divcss/

 

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn