填充，被添加到該DIV

的寬度我使用此代碼填充，被添加到該DIV

<div class="main"> 
<div class="babyOne"> 
</div> 
<div class="babyTwo"> 
</div> 
</div> 

.main{ 
width:100%; 
position:relative; 
} 
.babyOne,.badyTwo{ 
width:50%; 
float:left; 
}

這個CSS上述一切工作正常。

但只要我給填充到內部的div所有的UI休息，

.babyOne,.badyTwo{ 
width:50%; 
float:left; 
padding:5px; 
}

和消防錯誤顯示的div等於填充的寬度的增加。根據填充屬性，這不應該發生。任何想法如何防止這種情況？

來源

2013-01-05 lokeshjain2008

只需使用'box-sizing：border-box;' 這將在元素的原始寬度內添加填充和邊框。 –

所有你需要學習CSS首先box-model

enter image description here

這說明，無論padding, border, margin您添加到您的元素也算之外，所以例如元素的200px width和100px height，如果你添加padding說5px比width和height將205px和105px respe沉着應對，所以序與此有關變通方法，您需要使用CSS3 box-sizing屬性，但它仍然是CSS3屬性，如果IE是要supprt主要的事情，我建議你根據自己的需要調整的元素

因此，例如與這些風格

div { 
    height: 100px; 
    width: 200px; 
    padding: 5px; 
}

一個div您可以重新大小的上面

div { 
    height: 95px; 
    width: 195px; 
    padding: 5px; 
}

CSS3 box-sizingReference

來源

2013-01-05 08:54:57

感謝您的解釋。你也指出了填充不應該改變盒子寬度的問題。無論如何，我得到了我的答案。在這些情況下，不應使用％的寬度，使用絕對值，如400px。 – lokeshjain2008

@ lokeshjain2008是... –

您的問題是預期的行爲。
你設置一個寬度，然後你說給它一些填充。
所以寬度加上填充將比原始寬度大。

您可以嘗試CSS3s box-sizing屬性：http://www.quirksmode.org/css/box.html

我不知道如何得到廣泛支持的是雖然。

還有SO答案的宿主這裏：How apply padding in HTML without increasing the div size?

來源

2013-01-05 08:40:32 diggersworld

包裝紙必須具有固定大小：http://jsfiddle.net/esVgH/1例如：

.main{ 
    width:200px; 
    position:relative; 
}

來源

2013-01-05 08:42:05

雅，這工作。這很奇怪。在我的情況下主要有980px。當我和如果寬度爲50％的div沒有填充都需要490px。如果我添加5px的填充都有寬度等於500px。 – lokeshjain2008

另一種解決方案是顯示.baby爲表格單元：

.babyOne, .badyTwo { 
    display: table-cell; 
}

來源

2013-01-05 08:44:53

.babyOne ,.badyTwo {

寬度：45％;/*正如你基於填充*/

float：left;

padding：5px;

}

來源

2013-01-05 08:50:34 shine

感謝您的快速response.i知道this.my問題是爲什麼填充改變div的寬度？如果我是對的，它不應該。馬金將改變這一點。 – lokeshjain2008

填充，被添加到該DIV

回答

相關問題