CSS - 保证金保证金

Question

我有一个带有2个div的aissue - 两个渲染为块都有15px的边距（顶部div有底部边距，底部有顶部），因此我预计它之间的差距是30px而不是15px，这是一个正确的假设还是我疯了！？

干杯 保罗

Answer 1

CSS box model定义了collapsing margins的行为，并且它是所有浏览器中的预期行为。

You might also find my answer to this related question to be of use

Answer 2

两个边距都有15px，而不是它们。如果你想添加它们，请使用填充。

Answer 3

有同样的问题，无法使用填充作为修复。 我已经设法用这个小黑客解决了这个问题：

.btn {
    /* hack for a 2px margin */
    border-top: 2px #fff solid !important;
    /* this is important if you have a background-color
    and don't want to see it underneath the transparent border*/
    background-clip: padding-box;
}

请为演示启动此代码段：

div {
  margin: 10px;
  background: rgb(48, 158, 140);
  padding: 5px 15px;
  font-weight: bold;
  color: #fff;
}

.fake-margin {
  border-top: 10px solid transparent;
  background-clip: padding-box;
}

<div>Margin applied is 10px on each sides</div>
<div>the first two have only 10px between them</div>
<div class="fake-margin">the last two have 10 + 10px</div>
<div class="fake-margin">= 20 px</div>

Answer 4

正确 - 但如果它没有成功，你可以尝试'填充'而不是'边缘' - 这可能会产生预期的效果。