Question

考虑下一个代码：

#container {
    width:500px;
}

#inside {
   padding:10px;
   width:100%;
}

如果我选择宽度：100％;它是否与声明“width 480：px”（即已经计算填充）相同或者是“width：500px”

由于

乔尔

Answer 1

它会像width:500px并添加填充 push 溢出内部#container ..

但如果#inside是一个块元素，那么只需给出填充就会使其表现得像width:480px

http://www.jsfiddle.net/uA9LV/
的示例

Answer 2

它将与父容器具有相同的宽度，前提是它是块级元素。所以#inside将是500px宽，每边都有10px的填充。

Answer 3

我把它放在一个示例文档中，容器div只调整了3个边（左边，顶部和底部）..并且内部div将容器外的边界向右推动了20px。

我在IE8，Firefox 3.6.10和最新的Chrome中测试过。使用各种doctypes没有任何效果。

我使用的代码是：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>Untitled</title>
    <style>
        #container {
            width:500px;
            border: solid 1px blue;
        }

        #inside {
           padding:10px;
           width:100%;
           border: solid 1px red;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="inside">
        Hello World!
    </div>
</div>
</body>
</html>

注意：如果您从#inside div中删除Width声明，那么您将得到您想要的内容。这是一个内部div，宽度为480px，每侧为10px，用于填充。有关详细信息，请参阅此链接：Solving the CSS Padding problem。

CSS填充和宽度

3 个答案: