CSS邊框問題

我正在閱讀關於W3學校的盒子尺寸屬性，並試圖用THIS EXAMPLE更改div的盒子尺寸屬性。CSS邊框問題

當我點擊試試按鈕它的工作如預期，擬合2個寬度爲150px的盒子，每個盒子在300px寬度的容器內。但是當我將容器的盒子尺寸屬性更改爲邊框時，這兩個盒子不適合容器內部。

爲什麼即使盒子寬度增加到300px，即容器寬度，這是發生了什麼？

2014-07-15 Dramorian

你縮小容器的大小，所以它不會工作，首先嚐試適合的容器中，然後內盒 – budamivardi

它似乎爲我工作得很好。如果我使用TryIt示例，首先看到下面的框。然後，我點擊TryIt按鈕，這些盒子就會彼此相鄰，因此有足夠的空間。也許它依賴於瀏覽器版本？ –

我認爲，他的意思是它工作正常，直到你添加'box-sizing：border-box'到'div.container'。 – jpotapova

您的外部容器也有1px邊框。

如果您不將box-sizing: border-box應用於外部容器，則其邊框不會計入300px。所以內部區域是300px，並且兩個內部框適合。

當您將box-sizing: border-box添加到外部容器時，其寬度，填充和邊框一起使得300px，因此其內部區域變成僅298px（因爲每邊都有1px邊框），所以內部的兩個框不再適合。

2014-07-15 06:56:31 jpotapova

發生此問題的原因是border和padding。

首先你必須設置0填充到你的div.box。另外，如果你想填充左邊和填充右邊，你必須從寬度中減去它。

這意味着你必須從div.box寬度減去20px（10px padding-left + 10px padding-right）。所以你的寬度將是130px。

現在，對於邊框也必須從div.box減去邊框寬度。這裏的border是3px，因此，從div.box減去6px（3px，對於border-left + 3px，對於border-right）。

所以，最後你的代碼看起來像，

div.box { 
    border: 3px solid coral; 
    float: left; 
    padding: 10px; 
    width: 124px; 
}

2014-07-15 07:02:13 Husen

你的問題是：當我改變集裝箱的箱式施膠性邊境盒的兩個框裏面沒有裝修的容器。

答：當你添加box-sizing: border-box;到container，則container's寬度變298px事業300px其增加2px的邊框，1px形式left和right1px。

300像素= 298px + 1像素（左邊框）+ 1像素（右邊緣）

在這種情況下，要麼你需要增加container從300px的width到302pxOR可以減小寬度從1px內div's每個喜歡

div.box { width: 149px; }

2014-07-15 07:23:31 amol

回答