css：神祕的「邊距」

Question

每當我有兩個元素並排左右水平填充指定的右側和/或左側填充和/或邊距時，元素之間通常會有空格，超出我指定的元素之上。我希望有人可以告訴我如何消除這個空間（沒有像消極保證金那樣的東西）。

請注意：我不在尋找替代性的多列CSS佈局技術。我知道那裏有大量的問題，這個問題比只是一個列布局問題更大。

以下是working example page的標記和樣式。顯示用Firebug選擇的左側元素的Here's a partial screenshot of that page。有問題的神祕空間位於右側，並標有紅色星號。沒有包含重置樣式，但是我插入了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/

還有其他基於CSS的解決方法，例如在身體上設置的0的字體大小，但AFAIK它們並不像一致/可靠。但我可能是錯的。

Answer 2

我改變了這個CSS：

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

而且在CSS中添加腳註：

#website-footer { 
    clear: both; 
} 

而這個固定的問題。

我通常會在元素彼此相鄰時浮動元素。