vertical-align的用处

1.清除IE6，7下li的上下间隙（3像素）

.list{ width:300px;margin:0;padding:0;}

.list li{ list-style:none;height:30px;border:1px solid #000; font-size:12px; line-height:30px; vertical-align:top;}

.list a{float:left;}

.list span{float:right;}

<ul class="list">

<li><a href="#">文字文字文字文字文字</a>      <span>作者</span>     </li>  

   <li>      <a href="#">文字文字文字文字文字</a>         <span>作者</span>     </li>   

  <li>      <a href="#">文字文字文字文字文字</a>         <span>作者</span>     </li>

    <li>      <a href="#">文字文字文字文字文字</a>         <span>作者</span>     </li>

</ul>

2.清除图片下的间隙

.box{border:10px solid #000;background:Red;}

img{ vertical-align:top;}

<div class="box">

 <img src="img/pic.jpg" />

<img src="img/pic.jpg" />

<img src="img/pic.jpg" />

</div>