2つのdiv間に予期しない間隔があります

Question

画像とリストの間にスペースがあるのはなぜですか？ http://jsfiddle.net/ZPQUP/3/ また、<li>要素ができるだけ多くの領域を占有するようにするにはどうすればよいですか？最後の子供に余分なスペースはありませんか？

Answer 1

display: block;を作成してください。

IE6/7のサポートが必要ない場合は、CSSを使用してテーブルに変換します。

あなたが幅を追加することができますhttp://jsfiddle.net/ZPQUP/9/

Answer 2

を参照してくださいリスト項目はすべて "UL" を記入します：33％;リストアイテムに：

li.item { 
    margin: 0px; 
    display: inline; 
    float: left; 
    height: 50px; 
    border-left: 1px solid #ddd; 
    display: inline; 
    width:33%; 
} 

Answer 3

これは、画像がインライン要素として動作しているためです。インライン要素はブロックレベル要素のように動作するdisplay: block;力、それを使用するなどj、g、q、pのように、垂れ下がる手紙、

ための一番下にあるスペースを持っています。

#profile-grid img { 
    height: 250px; 
    width: 332px; 
    padding: 0; 
    margin: 0; 
    display: block; 
}