CSS填-显然我错过了什么

StackOverflow https://stackoverflow.com/questions/708855

  •  22-08-2019
  •  | 
  •  

题

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

<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个能适合现在。换句话说，"容器"将保持不变，但增长的宽度 向下.

然而，我看到的是，"集装箱"是增加水平，而不是垂直的。

我怎么可以"容器"增长下垂直和住宿的相同宽度水平？

有帮助吗？

解决方案

你需要改变宽800px然后加你的填充。填充剂的宽度。

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

箱型的 礼貌的 可以伯克Güder

其他提示

什么加里说，如果你使用的是Chrome或萤火虫插件的Firefox，你可以右键点击，“检查元素”，看看你的elemenent是如何定尺寸的可视化表示，确实有助于在这些情况下。

添加填充或保证金元素的

在影响完全取决于您用来浏览浸轧和利润的页面应该是添加剂浏览器作为加里说，但是这不是与IE6的情况下，所以你需要做一些围绕浏览器的差异研究以及如何将它们添加到您的样式规则。

这是它看起来像你这样做，你只是想填充被应用到整个页面。你可以做到这一点在你的CSS直接引用体。所以你必须 - 

body
{
    padding:0 50 0 50;
}

您也可以在DIV中添加保证金什么：

<style type="text/css">    
#container    
{    
    margin: 0 auto;    
    width: 900px;    
    background: green;    
}
#container *
{
    margin-left: 50px;
    margin-right: 50px;
}
</style>
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top