0

I have this code:

<div class="container">
    <div class="contained one">foobar</div>
    <div class="contained two">foobar</div>
</div>    

-- css --

.container {
    background: red;
    width: 500px;
    height: 200px;
}
.contained {   
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
    float: left;
    padding: 10px;
}
.one {
    background: blue;
}
.two{
    background: green;
}

I would like to give a margin around to the contained divs, but I don't know how..

4

2 回答 2

0

就像填充一样。 margin: 10px;例如。

请注意，边距也需要计算到元素的宽度中。所以我建议给 % 边距，然后确保你的边距总百分比加上你的宽度 = 100%。

你可以做类似...

.contained {   
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 45%;
    margin: 2.5%;
    float: left;
    padding: 10px;
}

这是因为 (2.5left + 2.5right) * 2 个框 = 10% 总边距空间...然后 10% + 45% 每个框是 10% + 90% = 100%

JS小提琴

在评论中回复您的问题：

因为你的容器有一定的宽度，不管那个宽度是多少，里面只能装这么多。CSS 的编码方式，任何元素的“总”宽度包括其定义的宽度、任何边框空间、填充和边距。这是任何元素操作的默认方式。在上面的代码中，你有 box-sizing:border-box。这告诉浏览器计算“宽度”属性，包括填充和边框。不幸的是，没有包含边距空间的代码。

所以想象它是这样的。您有一个可以容纳 100 100 个球的盒子，并且仍然关闭盒子的盖子。如果你有 101 个球，盖子不会关闭。所以假设你想在盒子里放 50 个蓝球和 50 个红球。您仍然可以关闭盖子，因为您没有超过 100 个球的限制。现在假设您想要在 50 个红球和 50 个蓝球之间留出一定的空间。让我们想象这个空间只是空的“空气”，但实际上，空气实际上也占据了空间。因此，为了在两组球之间放置 10 个“球单元”的空气“空间”，需要发生以下两件事之一，以便仍然关闭盒子的盖子。

您可以将盒子扩大 10 个单位，总共 110 个“球单位” - 50 个用于红球，50 个用于蓝球，10 个用于分隔两组的空气。或者，您可以移除一些已经在容器内的球，以适应 10 个“球单元”的空气。所以你可以有 45 个蓝色球、45 个红色球和 10 个空气单位 = 100，然后合上盒子上的盖子。只要红球、蓝球和空气的数量等于您的盒子最多 100 个球单位，那么它们就可以装下并且您可以合上盖子。可以使用任何组合。例如，您可以在每组之后有 10 个红球、10 个蓝球、10 个绿球、10 个黄球和 10 个紫球和 10 个空气单位。那是...

10red + 10air + 10blue + 10air + 10green + 10air + 10yellow + 10 air + 10purple + 10 air

10+10+10+10+10+10+10+10+10+10 = 100

现在...也就是说，如果您没有使用过，box-sizing: border-box;那么您还必须在计算中包括填充和边框以及边距。

于 2013-05-02T16:07:08.713 回答
0

这是一个工作jsfiddle。

只改变了一个 CSS 块

.contained {   
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 46.25%;
    float: left;
    padding: 10px;
    margin:2.5% 0 2.5% 2.5%;
}

这会在块周围产生均匀的间距。

于 2013-05-02T16:19:23.850 回答