padding正在添加到div的宽度

Question

我使用此代码

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

和fire bug显示div的宽度增加等于填充。 根据填充属性，这不应该发生。 任何想法如何防止这种情况？

Answer 1

首先，您需要学习CSS box-model

这表明，无论你向padding, border, margin添加什么元素都会在它之外计算，所以例如元素是200px width和100px height，如果你添加padding说5px width和height分别为205px和105px，因此为了解决此问题，您需要使用CSS3 box-sizing属性，但仍然是CSS3属性，如果IE是您想要支持的主要内容，我建议您根据需要调整元素大小

例如，具有这些样式的div

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

您可以将上面的内容重新调整为

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

CSS3 box-sizing Reference

Answer 2

WRAPPER必须具有固定大小：http://jsfiddle.net/esVgH/1示例：

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

Answer 3

你的问题是预期的行为。
你设置一个宽度，然后你说给它一些填充。
所以宽度加上填充将大于原始宽度。

您可以尝试使用CSS3 box-sizing属性：http://www.quirksmode.org/css/box.html

我不确定它有多广泛支持。

这里还有很多SO答案：How apply padding in HTML without increasing the div size?

Answer 4

另一个解决方案是将.baby显示为表格单元格：

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

Answer 5

.babyOne，.badyTwo {

宽度：45％; / *正如您所希望的那样基于填充* /

浮动：左;

填充：5px的;

}