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

1.  
2.  
3.  
4.  
5.  
6.  
7.  
8.  
9.  
10.  
11.  
12.  
13.  
14.  
15.  
16.  
17.  
18.  
19.  
20.  
21.  
22.  
23.  
24.  
25.  
26.  
27.  
28.  
29.  
30.  
31.  
32.  
33.  
34.  
35.  
36.  
37.  
38.  
39.  
40.  
41.  
42.  
43.  
44.  
45.  
46.  
47.  
48.  
49.  
50.  
51.  
52.  
53.  
54.  
55.  
56.  
57.  
58.  

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