首页新闻手机家电数码电脑财经大模型直播

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

2009-07-10/14:58

软件频道

软件教程

CSS

基础教程

正文

在用CSS制作网页过程中可能会碰到图片下面有空隙的问题，本文给出了最为简单的解决方法。

解决方法：在图片的css中加 vertical-align:bottom; 效果

演示代码：

<!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>