设为首页 | 加入收藏夹
您现在的位置:计算机基础知识首页 >> 网页平面flash >> 信息正文

CSS解决图片下面有空隙的简单解决方法

2015/5/26 22:23:58 作者:计算机基础知识试题 录入:应序康 访问:3785 次 被顶:1 次 字号:【
摘要:在用CSS制作网页过程中可能会碰到图片下面有空隙的问题,本文给出了最为简单的解决方法。解决方法:在图片的css中加 vertical-align:bottom; 属性即可我也在是一次制作手机网站的时候,发现加入了声明后,网页图片中就出现了空...

在用CSS制作网页过程中可能会碰到图片下面有空隙的问题,本文给出了最为简单的解决方法。解决方法:在图片的css中加 vertical-align:bottom; 属性即可

 

我也在是一次制作手机网站的时候,发现加入了声明后,网页图片中就出现了空隙,解决方案用如下两句CSS代码即可。

 

*{margin:0px;padding:0px;}
img {vertical-align:bottom; display:block;}


演示代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>解决图片下有空隙</title>
</head>
<body>
<style>
*{margin:0px;padding:0px;}
#l1 {float:left;background:#000;padding:20px;margin:50px;}
#l1 ul li {list-style:none;}
#l1 ul li img {vertical-align:bottom; display:block;}
</style>
<div id="l1"><ul><li><img src="图片地址1" /></li><li><img src="图片地址2" /></li><li><img src="图片地址3" /></li><li><img src="图片地址4" /></li></ul>
</div>
</body>
</html>

参与评论
共有评论 0网友评论列表
CopyRight © 2009-2012 计算机基础知识 Inc.All Rights Reserved. 备案:苏ICP备09028880号