邊框與百分比和邊距

如何使用邊框與百分比和邊距？示例如下。邊框與百分比和邊距

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

我想股利（.half）要佔用50％的畫面 - 一個爲5px保證金各地的DIV是這個塑形我嘗試它使更廣泛的50％以上，每次使上述第2盒在下一行，如果可能，我想避免基於％的利潤率。

來源

2013-07-31 Mitchell Bray

利潤率從來沒有計算爲寬度的一部分，甚至可以通過box-sizing: border-box;

因此，嘗試替代幅度與border: 5px solid transparent

或者，如果你不能覆蓋的邊界，這取決於在你想達到的效果上嘗試:after/:before pseudoelements，例如

.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

來源

2013-07-31 09:55:28 fcalderan

是的，我試過了，但在我的實際代碼下調例如我也是用box shaddows –

@MitchellBray然後使用'padding'而不是'border'。或者在'.half'元素（5px寬）內使用'：after /：before'僞元素，如果水平空間足夠用於您的目的， – fcalderan

也是透明的，不會給我之後的差距。 –

餘量被認爲是外箱（它是在你的盒子周圍的空間，而不是在盒子裏）。邊距尺寸不計入容器寬度的一部分。事實上，當你輸入box-sizing: border-box;，你的意思是the size of the box includes the border size，如果你看下面這張圖片，你會看到邊界在邊界之後，所以它被忽略。

enter image description here

來源

2013-07-31 10:00:04

試試這個：

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>

來源

2013-07-31 10:06:53

你知道任何方式沒有％的利潤我真的很喜歡設置5px保證金 –

邊框與百分比和邊距

回答

相關問題