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

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

WBOY
Freigeben: 2016-06-24 11:31:25
Original
4254 Leute haben es durchsucht

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

 

img {display:block;}
Nach dem Login kopieren

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

img {vertical-align:top;}
Nach dem Login kopieren

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

.box{font-size:0px;}
Nach dem Login kopieren

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

.box{overflow:hidden}
Nach dem Login kopieren

 

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

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

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

 

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage