2

可以说我有一些这样的标记：

<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 个左右可以安装。换句话说，“容器”将保持相同的宽度但向下增长。

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

我怎样才能让“容器”垂直向下生长并水平保持相同的宽度？

4

4 回答 4

6

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

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

盒子模型由Can Berk Güder 提供

于 2009-04-02T08:51:40.173 回答
2

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

于 2009-04-02T08:58:10.797 回答
0

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

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

body
{
    padding:0 50 0 50;
}
于 2009-04-02T08:58:42.433 回答
-1

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

<style type="text/css">    
#container    
{    
    margin: 0 auto;    
    width: 900px;    
    background: green;    
}
#container *
{
    margin-left: 50px;
    margin-right: 50px;
}
</style>
于 2009-04-02T08:57:33.263 回答