Curso de HTML | Padding y width 1

Curso de HTML
Padding y width

Curso de HTML | Padding y width 2

Curso de HTML | Padding y width

29.  
30.  
32.  
34.  
47.  

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.

Problema y solución cuando usamos padding

<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>
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor

Problema y solución cuando usamos border

<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>
Lorem ipsum dolor
Lorem ipsum dolor
Lorem ipsum dolor