有没有办法在添加填充时保持div的宽度和高度固定？

Question

例如：

.large{
    font-size: 200%;
}
.bluebox{
    background-color: blue;
    height: 200px;
    padding-left: 20px;
    width: 200px;
}

<div class="bluebox">
    <p class="large">This is a bigger paragraph</p>
</div>

当我向内容添加填充时，我希望将div保持在固定的widht和height中。 （是的，我可以预先计算填充，然后给出适当的宽度但是如果有更简单的方法吗？）

Answer 1

box-sizing: border-box;正是您要找的。

它会更改默认的CSS框模型，以计算元素的宽度和高度，包括边框和填充，但不包括边距。

  

<强> 6.1. ‘box-sizing’ property

     

<强>边界框
  指定的宽度和高度（以及相应的最小/最大属性）   此元素确定元素的边框。也就是说，任何   布局和绘制元素上指定的填充或边框   在指定的宽度和高度内。

<强> EXAMPLE HERE

Answer 2

以下CSS应该有效

box-sizing: border-box; 
padding:12px;