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; 
} 

而这个固定的问题。

我通常会在元素彼此相邻时浮动元素。