Html 填充和边距导致我的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 ------>

我原以为这会使content div与浏览器窗口一样宽，然后调整.top div的大小以适应其中的内容，同时还具有填充和边距（不知道如何充分解释），但事实并非如此。相反，top与屏幕一样宽，但由于边距，它延伸到窗口外的某个位置，然后添加另一个边距，使其具有水平滚动条，如下所示：

正如您所看到的，它应该更向左，有一个35页边距，页面的结尾应该在页眉结束的地方

---

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

你的问题是

width

指定了内部容器的宽度，并且添加了

margin

和

padding

我不明白你为什么在这里使用

position:absolute

---

是否按预期运行？

如果忽略浮动，则定位绝对值及其类似值： 宽度：100%表示最近的封闭框

我的猜测是，你的内容中有一个元素没有你想象的那么广泛

（在css中的某个地方植入*{border:1px solid red}用于调试不会有任何伤害；）

是您想要的吗？

#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);
}