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

如果你忽略 float ，绝对定位和它的同类: width:100% 指的是最近的封闭框。

我的猜测是您的内容周围有一个元素并没有您想象的那么宽。

(在你的 css 中的某处放置 *{border: 1px solid red} 用于调试从来没有坏处;))