寬度問題：邊框時為50％！=無（CSS）

Question

寬度問題：邊框時為50％！=無

看看http://jsfiddle.net/5nYSf/

結果應該是這樣的

Answer 1

你可以將兩個元素放在50％寬的彼此旁邊，然后你可以在每個元素里面放置一個邊距和邊框： http ： //jsfiddle.net/5nYSf/47/

Answer 2

如果邊框是固定寬度，則可以使用CSS中的calc（）函數從元素寬度中減去邊框長度。

.attachments {
height:80px;    
background-color:#E4E4E4;
}

.attachments span {
float:left;
height:100%;
width:calc(50% - 6px);
background-color:#9FB9CA;
border:3px #879AA8 solid;
}

http://jsfiddle.net/5nYSf/277/

Answer 3

訣竅是，邊框和邊距不包括在高度/寬度計算中。 因此，如果您的元素寬度為100px，邊界為2px，左邊距為10px，則將占用114px的水平空間。 （邊界計數兩次：左右。）IIRC，填充也不包括在內，但我不確定。

有幾種方法可以解決這個問題。 你可以在兩個元素或width:50%上有width:49% width:50%第一個是width:50% ，第二個是占用其余部分。
如果兩個元素必須占用完全相等的空間，則可以將每個元素包含在其自己的div 。 這些div將沒有邊框/邊距/填充，占據空間的50％，並且將在內部元素上指定邊框。

最后一種方法：
http://jsfiddle.net/5nYSf/35/

Answer 4

有一種簡單的方法：添加{box-sizing：border-box; 在.attachments中，50％的寬度也包含邊框

Answer 5

邊框是定義寬度的補充，因此50％+ 50％+ 3px邊框（兩邊）最終為100％+ 12px，比包含元素（100％）大12px。 嘗試使用49％或一些其他測量值，這將留下12px的邊框。

Answer 6

不要忘記考慮這些邊距（顯示淺灰色區域）並且你不能使用高度：100％因為你不能使用寬度的原因：50％（如其他人所述）

Answer 7

邊框擴大了框。

50％+邊界> 50％

你必須減少寬度：

.attachments {
    height:80px;    
    background-color:#E4E4E4;
}

.attachments span {
    display:inline-block;
    height:100%;
    width:48%;
    background-color:#9FB9CA;
    border:3px #879AA8 solid;
}