Layout CSS填充-显然我错过了一些东西_Layout_Padding_Css

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

layout css

Layout CSS填充-显然我错过了一些东西,layout,padding,css,Layout,Padding,Css,假设我有一些这样的标记： <html> <head> <style type="text/css"> #container { margin: 0 auto; width: 900px; background: green; } </style> </head> <body> <div id="container"> <

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

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

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

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

然而，我看到的是，“容器”的大小在水平方向上而不是垂直方向上增加

如何使“容器”垂直向下生长，水平方向保持相同的宽度？

您需要将宽度更改为800px，然后添加填充。填充会增加宽度

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

承蒙

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

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


#容器
{    
保证金：0自动；
宽度：900px；
背景：绿色；
}
#容器*
{
左边距：50像素；
右边距：50px；
}

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

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

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

body
{
    padding:0 50 0 50;
}

不知道它是这样工作的。这是一个显而易见的解决办法。谢谢除了加里的回答：好链接，我把它添加到了我的答案中，因为有人可能不会查看评论。是的，这有点危险，因为它会给部门中的所有内容增加一个空白。@安德鲁·布洛克：为什么不@加里·舒特勒：是的，它会给所有东西增加一个边距，但如果你知道你只增加了一件事，那没关系，OP想把它看作是一个800宽的div，在文本之前有一个50像素的间隔。

body
{
    padding:0 50 0 50;
}