带有百分比和边距的边框

Question

如何使用百分比和边距的边框？ 例子如下。

<style>
.half{
    width: 50%;
    float: left;
    background: red;
    margin: 5px;
    box-sizing: border-box;
            box-shadow: 0px 0px 3px black;
}
</style>
<div class="half">half</div>
<div class="half">half</div>

我希望div（.half）占据屏幕的50％ - div周围的5px边距是每次我尝试时都可以使它超过50％并将第二个框放在下一行如果可以的话，我想避免基于百分比的保证金。

Answer 1

即使使用box-sizing: border-box;

，也不会将边距计算为宽度的一部分

请尝试使用border: 5px solid transparent

替换保证金

---

或者，如果您无法覆盖边框，则根据您想要实现的效果尝试使用:after/:before伪元素，例如

.half {
    width: 50%;
    float: left;
    background: red;
    box-sizing: border-box;
    box-shadow: 0px 0px 3px black;
}

.half:after, .half:before {
    content: "";
    width: 5px; /* or more if you need more space */
    display: inline-block;
}

示例：http://jsbin.com/imiqak/1/edit

---

或者您可以使用一些嵌套元素，如下所示：

.half {
    width: 50%;
    float: left;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 5px;
}

.half p {
    background: red;
    box-shadow: 0px 0px 3px black;
}

示例：http://jsbin.com/imiqak/3/edit

Answer 2

保证金被认为是在盒子外面（它是在你的盒子周围的空间，而不是在盒子里）。边距大小不计入容器宽度的一部分。

确实，当您输入box-sizing: border-box;时，表示the size of the box includes the border size，如果您查看下面的图片，您会看到边距位于边框之后，因此会被忽略。

Answer 3

试试这个：

CSS：

<style type="text/css">
.half{
    width: 49%;
    float: left;
    background: red;
    box-sizing: border-box;
}

.half:last-child{
margin-left: 1%;
}
</style>

HTML：

<div class="half">half</div>
<div class="half">half</div>