Question

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

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

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

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

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

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

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

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

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

Answer 1

您需要将宽度更改为800px，然后添加填充。填充是宽度的附加。

    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

提供

Answer 2

Garry说，如果您使用适用于Firefox的Chrome或Firebug插件，您可以右键单击并“检查元素”并查看您的元素大小的直观表示，在这些情况下确实有帮助。

Answer 3

为元素添加填充或边距的影响完全取决于您正在查看页面的浏览器。填充和边距应该像加里所说的那样是附加的但是IE6的情况并非如此，所以你需要做一些研究浏览器差异以及如何在风格规则中容纳它们。

从您的工作看起来，您只需要将填充应用于整个页面。您可以通过直接在CSS中引用body来实现。所以你会 -

body
{
    padding:0 50 0 50;
}

Answer 4

您还可以为div中的任何内容添加边距：

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

CSS Padding - 显然我错过了一些东西

4 个答案: