css：神秘的“边距”

Question

每当我有两个水平并排的元素并指定了右和/或左填充和/或边距时，元素之间通常会在我指定的内容之上和之上存在空间。我希望有人能告诉我如何消除这个空间（没有像负边距这样的粗俗东西）。

请注意：我并不是在寻找替代的多列 CSS 布局技术。我知道那里有很多这样的问题，这个问题不仅仅是列布局问题。

以下是工作示例页面的标记和样式。 这是该页面的部分屏幕截图，其中显示了使用 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/ issues/6/unwanted-white-space- Between-inline-block-elements/

还有其他基于 css 的解决方法，例如在正文上设置字体大小为 0，但据我所知，它们并不一致/可靠。但我可能是错的。

Answer 2

我更改了此 Css:

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

并在页脚中添加了 Css:

#website-footer {
    clear: both;
}

这解决了问题。

当我希望元素彼此相邻时，我通常会浮动它们。