交互设计中心-72色

做图片列表的时候，发现图片右边和下边有一定的空隙，在ff里就没有，网上找了下解决方案，很管用，现在就把各种方法都列出来，供大家根据情况使用。 有空隙的时候
  <style type="text/css"> div { width:500px;border:1px solid #f00;background:#000;} </style> <div> <img alt="" src="http://www.google.com/intl/en/images/logo.gif" /> </div>

解决方法:一、改变HTML的排列（仔细看）
  <style type="text/css"> div { width:500px;border:1px solid #f00;background:#000;} </style> <div><img alt="" src="http://www.google.com/intl/en/images/logo.gif" /></div>

解决方法:二 、display:block
 <style type="text/css"> div { width:500px;border:1px solid #f00;background:#000;} img {display:block} </style> <div> <img alt="" src="http://www.google.com/intl/en/images/logo.gif" /> </div>

解决方法:三、负值
  <style type="text/css"> div { width:500px;border:1px solid #f00;background:#000;} img {margin-bottom:-5px}div>img {margin-bottom:0} </style> <div> <img alt="" src="http://www.google.com/intl/en/images/logo.gif" /> </div> 解决方法:四、字体大小
<style type="text/css"> div { width:500px;border:1px solid #f00;background:#000;font-size:0} </style> <div> <img alt="" src="http://www.google.com/intl/en/images/logo.gif" /> </div>

解决方法:五、vertical-align:bottom 、 vertical-align:middle 、vertical-align:top .............
  <style type="text/css"> div { width:500px;border:1px solid #f00;background:#000} img {vertical-align:bottom}</style> <div> <img alt="" src="http://www.google.com/intl/en/images/logo.gif" /> </div>