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

Question

我有这个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，页面的末尾应该是标题结束的位置。

我希望这很清楚，我从来没有解释过这样的事情，但我希望有人可以帮助我，这真的让我烦恼。

Answer 1

如果你忽略浮动，那么绝对和同类： 宽度：100％是指最近的封闭盒。

我的猜测是，你的内容周围的元素并不像你想象的那么宽。

（在你的css中某处种植* {border：1px solid red}以便调试永远不会伤害;））

Answer 2

您的问题是width指定了内部容器宽度，并且添加了margin和padding。

我不明白为什么你在这里使用position: absolute。

this是否符合预期？