Curso de HTML | 15. Padding y width

Cuando añadimos un padding o un border a una capa con un width definido expresamente, el tamaño del padding y del borde se sumará al tamaño del div y tendremos que restar lo que hemos añadido de padding al width para que la maquetación nos quede correcta.

Utilizando el estilo box-sizing: border-box; ya no será necesario sustraer el padding ni el ancho del border del width.

<div style="width: 200px; background-color: pink">
    Lorem ipsum dolor
</div>

<div style="width: 200px;background-color: salmon; padding:50px">
    Lorem ipsum dolor
</div>

<div style="width: 200px;background-color: green; padding:50px; box-sizing: border-box">
    Lorem ipsum dolor
</div>

<div style="width: 200px; background-color: pink;">
    Lorem ipsum dolor
</div>

<div style="width: 200px;background-color: salmon; border: 25px solid green;">
    Lorem ipsum dolor
</div>

<div style="width: 200px;background-color: salmon; border: 25px solid green; box-sizing: border-box;">
    Lorem ipsum dolor
</div>