CSS margin-top issue - 元素需要100％宽度，否则渲染效果不佳？

Question

我会尽可能简单地解释一下。

假设我有一个尺寸为150像素宽，高40像素的徽标，我希望将它包含在820像素宽的容器顶部。为了使用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已被删除。