等于元素之间的边距答案

【问题标题】：equals Margins between elements等于元素之间的边距
【发布时间】：2013-06-12 00:32:24
【问题描述】：

我在另一个里面有 4 个 div。

我希望在 divs 内部具有相等的边距，因此在根 div 的左边缘和div 内部的第一个内部之间、div 内部的两个内部之间和div 内部的最后一个之间有相同的空间根的右边缘。

现在我可以看到了

http://jsfiddle.net/rXYqR/

有没有办法用 CSS 的任何特殊属性来做到这一点？还是我必须手动分配边距？

谢谢！

【问题讨论】：

#root * {margin:inherit;}?如果那不是你想要的，试着用一种不那么混乱的方式来描述它。
这听起来与that was asked here 完全相同的问题。事实证明这是一个非常困难的问题——我们没有找到一个很好的答案，包括边距以及元素之间的边距。
@Spudley 下面有一个很好的答案可以解决这个问题（我认为）！

标签： html css

【解决方案1】：

#root{
    background: red;
    width: 400px;
    font-size:0;
}

#root > div{
    display: inline-block;
    width: 50px;
    height: 50px;
    background: blue;
    margin-left: calc((100% - 200px) / 5); /* Pre-calced 40px */
}

jsfiddle：http://jsfiddle.net/rXYqR/2/

【讨论】：

哇！我不知道'calc'存在！这很棒！谢谢！
它适用于所有优秀的浏览器。 Chrome、Firefox 和 IE 9+ 都支持它。 Safari 6 使用供应商前缀支持它，但它会使浏览器崩溃很多。