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

【问题标题】：Padding and Margin causing my div to be too wide填充和边距导致我的 div 太宽
【发布时间】：2012-06-13 21:55:15
【问题描述】：

我有这个 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，页尾应该是页眉结束的地方。

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

【问题讨论】：

this 是你想要的吗？

标签： html css window padding margin

【解决方案1】：

如果您忽略浮点数，则定位绝对值及其同类： width:100% 指的是最近的封闭框。

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

（在你的 CSS 中的某处种植 *{border: 1px solid red} 以进行调试永远不会受到伤害；））

【讨论】：

【解决方案2】：

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

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

this 的行为是否符合预期？

【讨论】：