Question

以下示例在几乎所有浏览器中都相同，包括IE6：

#one  {border : 1px solid red;padding:20px}
#two  {border : 1px solid yellow}
p     {border: 1px solid blue;}
.marg {margin: 0;padding: 0}
.padd {margin:  20px}
</style>
</head>
<body>

<div id="one">
  <p class="marg">Padding to div</p>

</div>

<div id="two">
  <p class="padd">margin tp P</p>

</div>

但是当我将width提交给div时，第二个div会变得比第一个div更短。

我们应该如何决定哪个合适？

我应该了解哪些浏览器兼容性问题？

Answer 1

边缘处的边缘，内部相对于边界的填充物。很明显，如果你有像背景图像和文字这样的东西，并且你希望文本在bg图像的边缘之间有空间，你就会使用填充。边界也一样。

如果除了边框/ bg图像之间的空间外，你想要外面的空间，那么你就会使用边距。

如果你没有做任何远程设计复杂的事情那么它应该不重要，但你要注意的一件事是保证金崩溃，如果你有垂直边距之前/之后的元素，你指定边距值会崩溃，有时你会使用填充来浏览它。

如果您给#one和#two宽度为200px，#one将占用240像素而不计算水平边框，因为它有20px的水平填充。

IE5的渲染引擎和怪癖模式IE6 / IE7错误地绘制了正确的空间量，如果指定水平填充和宽度，width:100px; padding:20px;会强制该框实际占用100像素的宽度，而不是实际存在140像素应该是正确的。

另一个要注意的错误是双边距错误;如果你有一个浮动元素和一个与浮点数方向完全相同的边距，例如float:left;margin-left:100px;它会意外地翻倍。这是通过添加display:inline;来解决的，这会迫使它在左边只有100px而不是200px。

我注意到你问了很多问题，只需阅读一本体面的前端书就可以解答 - 你考虑过阅读：

那些可能会回答你的很多问题......

Answer 2

我会根据您的代码中的内容做出决定。

例如，<p>是唯一会出现在div中的东西吗？如果是这样，那么它可能无关紧要。

如果div中还有其他元素，你是否想要在它们周围填充？

对于修改后的宽度，这可能是由于浏览器之间的different boxing models造成的。

Answer 3

我认为简单的方法就是思考元素的边界。

边界外的边距空间，内部填充。

当然，有一些与浏览器相关的问题在某种程度上使它们有所不同，但我建议保留我的建议，并在这些特殊浏览器上找到解决方法。

间距边距或填充？

3 个答案: