Margen interior
Con la propiedad padding
podemos definir el ancho del margen interno.
p {
padding: 20px;
}
Los valores que permiten son:
auto
- Longitud
- Porcentaje
Variantes
Existen cuatro variantes de la propiedad:
p {
padding-top: 10px;
padding-bottom: 20px;
padding-right: 30px;
padding-left: 40px;
}
Múltiples valores
La propiedad padding
tiene diferentes comportamientos según los valores que le indiquemos:
- Con 1 valor: se aplica a los cuatro lados.
- Con 2 valores: el primero se aplica a superior e inferior y, el segundo, a los lados izquierdo y derecho.
- Con 3 valores: se aplica el primero, al superior; el segundo, a los laterales; y el tercero al inferior.
- Con 4 valores: se aplica a superior, derecho, inferior, izquierdo.
.e1 {
padding: 10px;
/*
Todos los lados: 10px
*/
}
.e2 {
padding: 10px 20px;
/*
Arriba/abajo: 10px
Izquierda/derecha: 20px
*/
}
.e3 {
padding: 10px 20px 30px;
/*
Arriba: 10px
Izquierda/derecha: 20px
Abajo: 30px
*/
}
.e4 {
padding: 10px 20px 30px 40px;
/*
Arriba: 10px
Derecha: 20px
Abajo: 30px
Izquierda: 40px
*/
}
También es posible fijar el valor de cada una de los cuatro valores independientemente con la propiedad correspondiente.