Padding
La propiedad padding nos permite modificar las dimensiones del espacio entre el borde y el área de contenidos.
Este valor lo podemos aplicar a cualquier elemento, sea en linea o en bloque.
Podemos asignar esta propiedad un lado a la vez o a todos lados al mismo tiempo de la siguiente manera:
- padding-top
- padding-right
- padding-bottom
- padding-left
- padding
Lados individuales
div {padding-top: 40px;}
div {padding-right: 5px;}
div {padding-bottom: 50px;}
div {padding-left: 60px;}
Este código aplicado a nuestra caja se vería así:
Cupcake ipsum dolor sit amet caramels. Dragée I love soufflé applicake chocolate cake pastry applicake. I love cheesecake chocolate bar fruitcake.
Lados al mismo tiempo
div {padding: 40px 5px 50px 60px;}
Podrás notar que el orden es el mismo del ejemplo anterior, comenzamos por arriba y seguimos según las manecillas del reloj con el lado derecho, abajo y finalmente izquierdo.
Este código aplicado a nuestra caja se vería así:
Cupcake ipsum dolor sit amet caramels. Dragée I love soufflé applicake chocolate cake pastry applicake. I love cheesecake chocolate bar fruitcake.
Existen tres formas adicionales de aplicar el padding:
div {padding: 20px;}
div {padding: 20px 10px;}
div {padding: 20px 50px 10px;}
Los valores corresponden a:
- Cuando hay un valor
- El valor corresponderá a los cuatro lados por igual.
- Cuando hay dos valores
- El primer valor corresponde a top y bottom. El segundo valor a right y left
- Cuando hay tres valores
- El primer valor corresponde a top. El segundo valor a left y right. El tercero corresponde a bottom