CSS - 边距相对于边距

Question

我有两个div的问题 - 它们都呈块状，并且都有15px的边距（顶部div有底部边距，底部div有顶部边距），因此我期望它们之间的间隙为30px而不是15px，这个假设正确吗？还是我疯了！

谢谢 保罗

- Dancer

---

做了一个小的示例，间隙为15像素 http://jsfiddle.net/RBR79/ - Curtis

可能有很多原因导致这个问题——定位、浮动、浏览器、容器块等等。请发布相关的CSS和HTML代码。编辑 @thirtydot：哎呀，忘记了边距会垂直折叠。http://www.richinstyle.com/guides/box2.html#margin - stslavik

@stslavik：这是折叠边距问题。 - thirtydot

Answer 1

CSS 盒模型定义了折叠边距的行为，这是所有浏览器都期望的行为。

你可能也会发现我对这个相关问题的回答有用。

- zzzzBov

Answer 2

我曾经遇到过同样的问题，无法使用填充来解决。 但是我用了一个小技巧成功解决了这个问题：

.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>

- TOPKAT

Answer 3

两侧边距均为15像素，不要将它们相加。如果您想要添加它们，请使用填充(padding)。

- v42

Answer 4

没错 - 但如果它不起作用，你可以尝试使用“padding”而不是“margin” - 这可能会产生期望的效果。

- Hanny

---

填充和边距是完全不同的东西，你不应该互相使用。 - Jose Faeti

填充应该只影响包含的 div。它是容器内边缘和内容外边缘之间的空间。 - stslavik

我原本以为他想要30px的空间，填充会达到这个效果。谢谢你们的提醒。 - Hanny

我给了负一分并不是因为你建议使用填充，而是因为你说保罗的假设是“正确的”，而它显然不是。 - zzzzBov

没错，zzzzBov。看来我今天有点落后了 - 需要更多的Java。 - Hanny