html - 填充和边距导致我的div太宽

我有这个div：

<!------ CONTENT ------>
<div id="content">
  <div class="top">
  I am cool<br />
  I am cool<br />
  I am cool<br />
  I am cool<br />
  </div>
</div>
<!------ /CONTENT ------>

使用此CSS：

#content{
    height:auto;
    width:100%;
    background-color:#FF0000;
}

#content .top{
    margin:15px 35px 35px 35px;
    padding:20px;
    width:inherit;
    height:inherit;
    position:absolute;

    -moz-box-shadow: 5px 5px 10px rgba(0,0,0,.8), inset 2px 2px 2px rgba(0,0,0,.2), inset -2px -2px 3px rgba(255,255,255,.85);
    -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.8), inset 2px 2px 2px rgba(0,0,0,.2), inset -2px -2px 3px rgba(255,255,255,.85);
    box-shadow: 5px 5px 10px rgba(0,0,0,.8), inset 2px 2px 2px rgba(0,0,0,.2), inset -2px -2px 3px rgba(255,255,255,.85);

    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color:rgba(224,224,224,.92);
}

我想这会使内容div和浏览器窗口一样宽，然后调整.top div的大小以适应其中的内容，同时也有填充和边距（不知道如何解释得足够好），但它没有。相反，top与屏幕一样宽，但由于边距的缘故，它会延伸到窗口之外的某个地方，然后添加另一个边距，使其具有一个水平滚动条，如下所示：
正如你所看到的，它应该更多地向左边，有一个35的页边空白，页面的结尾应该是页眉的结尾。
我希望这是清楚的，我从来没有解释过这样的事情，但我希望有人能帮助我在这里，这真的是困扰我。

最佳答案

如果忽略浮动，则绝对位置及其同类：
宽度：100%表示最近的封闭框。
我的猜测是你的内容周围有一个元素没有你想象的那么宽。
（将{border:1px solid red}放在css中的某个位置，用于调试永远不会有问题；）

关于html - 填充和边距导致我的div太宽，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/10972570/