html - 填充被添加到 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宽度的增加等于padding。 根据填充属性，这不应该发生。 知道如何防止这种情况吗？

Answer 1

首先你需要学习CSS box-model

这表明无论 padding, border, margin您添加到元素中的元素确实在其之外计数，因此例如该元素为 200px width和100px height ，如果添加 padding说5px比width和height将是205px和105px分别，因此为了解决此问题，您需要使用 CSS3 box-sizing属性(property)，但仍然是CSS3属性，如果您主要想支持 IE，我建议您根据需要调整元素的大小

例如具有这些样式的 div

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

您可以将上面的大小调整为<​​/p>

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

CSS3 box-sizing Reference