CSS margin-top issue - element需要100%的宽度，否则渲染效果很差

Question

我将尽可能简单地解释这一点。

假设我有一个logo，尺寸:宽150px，高40px，我想把它包含在一个820px宽的容器的顶部。为了利用margin-top的性质在下面的内容中，我发现自己将<div="logo></div>嵌套在另一个宽度设置为100%的容器中，如下所示;

<div id="logo_width">
  <div id="logo"></div>
</div>

到目前为止，这对我来说已经很好了，因为它完成了工作，但我仍然相信<div id="logo_width">(宽度设置为100%的容器)是开销，不需要的，并且有一个更好的方法可以在徽标下方的内容上正确使用margin属性，而不会弄乱它，因为上面没有容器具有100%的宽度。

也许我错了，但如果有人能告诉我一种方法来绕过这个(如果可能的话)，这样我只需要有<div id="logo"></div>而不嵌套它，我会非常非常感激:)!

Answer 1

不知道是什么问题，但这是可行的。

<div id="container">
    <div id="logo"></div>
</div>

CSS

#container{
    width:820px;
    border:1px solid red;
    height:400px;
}
#logo{
    width:150px;
    border:1px solid green;
    height:40px;
    margin-top:20px;
}

http://jsfiddle.net/jasongennaro/7WQZm/

在这个例子中，#container是你的820px的容器。删除div#logo-width