CSS解决图片下面有空隙的简单方法
在用CSS制作网页过程中可能会碰到图片下面有空隙的问题，最为简单的解决方法是：
Q bm!DF+w/L},K
'qS X{)o;SqbN!|
[b]在图片的css中加 vertical-align:bottom;[/b] [align=center][img]http://homepage.yesky.com/imagelist/2007/291/cra5tfuju171.gif[/img][/align]
3g F Mi2Y&l5O
[align=center][code]
8C Rz$T$bYi;G
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3oIh4j
[:B
<html xmlns="http://www.w3.org/1999/xhtml">
l2}Lb.W!] h,Q0Mf-j
<head>
,v {P
[+D)f5s:w
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
'{'l U$B]
<title>解决图片下有空隙</title>
%i\5PS z#|
O$F;I
</head>
.x"RU2h(_m(eh~
<body>
(^f H/pT SPFm+c
<style>
2? gur8\fo
*{margin:0px;padding:0px;}
G i*B,_r!o
#l1 {float:left;background:#000;padding:20px;margin:50px;}
&Ed7oS9Q&[Rmo+V
[
#l1 ul li {list-style:none;}
M4m4L?;Js,ygo
#l1 ul li img {vertical-align:bottom; display:block;}
RU3Mm+] Xse
</style>
(v ef,O\#]%CQ/|
<div id="l1">
(MP a}9pF
<ul>
-E[U HM
<li><img src="图片地址1" /></li>
oD8w
dT'T:U
<li><img src="图片地址2" /></li>
,rt,X.G h3]K
<li><img src="图片地址3" /></li>
x8A j+o Bs+e.lg
<li><img src="图片地址4" /></li>
#~ S S w/c|9w
</ul>
7d p$B
b\ x l1Y @
</div>
Uc)QB"Tp`G3^
</body>
WU7w|I$Z r
</html>
;`a w,[#G,\cMi j
[/code][/align]