这是我的代码:
我假设我做错了什么，但我期望右侧的填充也是 2px？
<!DOCTYPE html>
<html>
<head>
<style>
div{border:solid 1px gray;}
#outer{width:200px; padding:2px;}
#inner{width:100%;}
</style>
</head>
<body>
<div id="outer">
<div id="inner"> </div>
</div>
</body>
</html>
渲染:
最佳答案
您的问题是您将内盒的尺寸指定为与外盒的尺寸相同。将宽度设置为自动，您的问题就会消失。
内边距在对象周围形成了一个额外的不可见盒子，因此外部的实际大小超过 200。但是，内部的大小是 200。与边框相同。在内部框上，当您将其指定为 100% 时，它将是 200px，但边框将占用 2px，从而产生一个偏移，使其看起来没有应用填充。
关于css - 为什么嵌套 div 宽度在 webKit 和 Gecko 中没有按预期呈现？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4373209/