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

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

WBOY
Release: 2016-06-24 11:31:25
Original
4255 people have browsed it

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

 

img {display:block;}
Copy after login

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

img {vertical-align:top;}
Copy after login

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

.box{font-size:0px;}
Copy after login

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

.box{overflow:hidden}
Copy after login

 

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

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

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

 

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template