Question

因此，如果没有边界，margin collapsing会使孩子的边缘崩溃到父母的边缘。那么，我怎么能做到这一点呢？

-------------
|           | <-- "Top space"
|  -------  |
|  |     |  |
|  |     |  |
|  -------  |
|           | <-- "Middle space"
|  -------  |
|  |     |  |
|  |     |  |
|  -------  |
|           | <-- "Middle space"
|  -------  |
|  |     |  |
|  |     |  |
|  -------  |
|           | <-- "Bottom space"
-------------
 ^        ^
left     right
space    space

我希望所有这些“空格”都相等。

我希望每个孩子之间的空间为10px，孩子和父亲之间的空间为10px。如果我为每个孩子设置了10px的余量，并且父母没有填充，则“顶部空间”和“底部空间”将为0px。如果我在父母中有任何填充，“中间空间”将与顶部/底部空间不同。

我该怎么做？我不特别想浮动或清除任何元素，甚至添加新元素来实现这一目标。我只是觉得我在这里缺少一些聪明的数学。

Answer 1

这是最简单的方法：

只需向包含元素添加透明border。

Live Demo

<强> HTML：

<div id="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

<强> CSS：

#container {
    background: #ccc;
    width: 200px;
    border: 1px solid transparent /* "magic border" fixes it */
}
.square {
    margin: 10px;
    height: 50px;
    background: #f0f
}

或者，您可以使用position: absolute：

Live Demo

Answer 2

您可以为子元素赋予10px的边距，然后为10px的父填充。生病了吗

编辑：

使用边框怎么样？ - 没有
parent - display:table;

HTML：

<div>
    <p>Alex</p>
    <p>James</p>
    <p>thomas</p>
</div>

CSS：

div{display:table;}
p{margin:10px;}

http://jsfiddle.net/nqLYT/

Answer 3

我会尝试

.children{
margin: 5px;
}

.parent{
padding: 5px;
}

对于所有方向，这应该是10px。正确？

给定边距折叠，如何在父元素内均匀地分隔子元素？

3 个答案: