css：mystery "margin"

Question

右と左または左のパディングやマージンを横に並べて2つの要素を横に並べると、指定した要素の上と上の要素の間にスペースができることがよくあります。誰かが私にそのスペースをなくす方法を教えてくれることを願っています。

注：代替の複数列CSSレイアウトテクニックは探していません。私はそこにたくさんの人がいることを知っています。この問題は単なる列レイアウトの問題よりも大きいのです。

以下は、working example pageのマークアップとスタイルです。 Here's a partial screenshot of that pageには、Firebugで選択された左側の要素が表示されます。問題の神秘的な空間は右にあり、赤いアスタリスクでマークされています。リセットスタイルは含まれていませんが、Eric Meyersのリセットを差し込みました。問題は解決しませんでした。

<div id="side-a"> 
      <p> 
     Lorem ipsum .... 
     </p> 
    </div> 
    <div id="side-b"> 
      <p> 
     Nunc dapibus.... 
     </p> 
    </div> 

    <div id="website-footer"> 
      <ul id="legal-information"> 
        <li>Copyright 2011</li> 
        <li><a href="#">Privacy Policy</a></li> 
      </ul> 
    </div> 

    div#side-a, 
    div#side-b { 
     display: inline-block; 
     width: 200px; 
     padding: 17px 17px 0; 
    } 

    div#side-a { 
      vertical-align: top; 
    } 

    div#side-b { 
      background: #999; 
    } 

    ul { 
      padding-bottom: 17px; 
      list-style: none outside none; 
    } 

    ul li { 
      line-height: 17px; 
      margin-left: 17px; 
    } 

    div#website-footer ul#legal-information { 
      float: left; 
    } 

    div#website-footer ul#legal-information li { 
      border-left: 1px solid #29443C; 
      display: inline; 
      margin: 17px 0; 
      padding-left: 8px; 
    } 

    div#website-footer ul#legal-information li:first-child { 
      border-left: medium none; 
      padding: 0 8px 0 0; 
    } 

Answer 1

inline-blockのため自然です。シンプルなソリューションは、空白を削除することです。

http://work.arounds.org/issue/6/unwanted-white-space-between-inline-block-elements/

は、このような体に0のフォントサイズを設定するなど、他のCSSベースの回避策がありますが、私の知る限り、彼らは信頼性/として一貫していません。私は間違っている可能性があります。

Answer 2

私はこのCSSに変更：

#website-footer { 
    clear: both; 
} 

そして、これが問題を修正：フッターの

div#side-a, 
div#side-b { 
    float: left 
    width: 200px; 
    padding: 17px 17px 0; 
} 

とCSSに追加します。

私は通常、要素を隣り合わせに浮かべます。