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

Question

For example:

.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>

I want to keep div in fixed widht and height when I add padding to the content. (Yes I can pre-calculate padding and then give proper width but if there is a simpler way?)

Answer 1

box-sizing: border-box; is what you're looking for.

It changes the default CSS box model to calculate widths and heights of elements including borders and padding but not margin.

6.1. 'box-sizing' property

border-box
The specified width and height (and respective min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height.

EXAMPLE HERE

Answer 2

The following CSS should work

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