CSS 填充 - 显然我错过了一些东西答案

【问题标题】：CSS Padding - Apparently I missed somethingCSS 填充 - 显然我错过了一些东西
【发布时间】：2010-10-17 01:39:28
【问题描述】：

假设我有一些这样的标记：

<html>
<head>
<style type="text/css">
    #container
    {
        margin: 0 auto;
        width: 900px;
        background: green;
    }
</style>
</head>
<body>
    <div id="container">

    </div>
</body>
</html>

想象一下“容器”中填充了数百个用于测试填充的 a。

现在，我想做的是在“容器”的边缘及其左右两侧的内容之间创建一个空白区域。所以我补充说：

padding-left: 50px;
padding-right: 50px;

现在从我（认为）我的理解来看，这意味着如果以前每行安装 100 个 a，那么现在只能安装 80 个左右。换句话说，“容器”将保持相同的宽度，但会向下增长。

但是，我看到的是“容器”的大小是水平而不是垂直增加的。

如何让“容器”垂直向下生长并保持水平宽度不变？

【问题讨论】：

除了加里的回答：w3.org/TR/CSS2/box.html
好链接，我已将其添加到我的答案中，因为有人可能不会检查 cmets。

标签： layout padding css

【解决方案1】：

您需要将宽度更改为 800 像素，然后添加内边距。内边距是宽度的附加值。

    W------W   - original width
   PW------WP  - original width plus padding either side
    PW----WP   - smaller width plus padding either side

Box model Can Berk Güder 友情提供

【讨论】：

不知道它是这样工作的。多么明显的解决方案。谢谢！

【解决方案2】：

garry 说，如果您使用 Chrome 或 Firefox 的 Firebug 插件，您可以右键单击并“检查元素”并查看元素大小的可视化表示，在这些情况下真的很有帮助。

【讨论】：

【解决方案3】：

向元素添加填充或边距的影响完全取决于您正在查看页面的浏览器。填充和边距应该像 Garry 所说的那样是相加的，但 IE6 并非如此，因此您需要做一些研究浏览器差异以及如何在样式规则中适应它们。

从您所做的事情来看，您只是希望将填充应用于整个页面。您可以通过在 CSS 中直接引用 body 来做到这一点。所以你会有 -

body
{
    padding:0 50 0 50;
}

【讨论】：

【解决方案4】：

您还可以在 div 内的任何内容上添加边距：

<style type="text/css">    
#container    
{    
    margin: 0 auto;    
    width: 900px;    
    background: green;    
}
#container *
{
    margin-left: 50px;
    margin-right: 50px;
}
</style>

【讨论】：

是的，这有点危险，因为它会为 div 中的所有内容添加一个边距。
@Andrew Bullock：为什么不呢？ @Garry Shutler：是的，它会为所有内容添加边距，但如果您知道您只添加一件事就可以了，并且 OP 想将其视为宽度为 800 的 div，文本前有 50px 的间隙。