Padding y width

Por 9.99€ al mes tendrás acceso completo a todos los cursos. Sin matrícula ni permanencia.

Curso de HTML

30.  
31.  
34.  
37.  
50.  

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
← Estilos en línea
Cómo incrustar iFrames en nuestra página HTML →