Se puede especificar con las siguientes propiedades:
padding-topSolo especifica el tamaño del relleno en la parte superior de la caja.
Ejemplo:
padding-top: 3vh
padding-bottomSolo especifica el tamaño del relleno en la parte inferior de la caja.
Ejemplo:
padding-bottom: 50%
padding-leftSolo especifica el tamaño del relleno en el lado izquierdo de la caja.
Ejemplo:
padding-left: 8px
padding-rightSolo especifica el tamaño del relleno en el lado derecho de la caja.
Ejemplo:
padding-right: 3vw
padding: tamañoEspecifica el mismo tamaño de relleno arriba, abajo, a la izquierda y a la derecha.
Ejemplo:
padding: 1em
El relleno mide 1 renglón en todas las direcciones alrededor
del elemento.
padding: tam_vertical tam_horizontal
tam_vertical es el tamaño de los rellenos superior e inferior.
tam_horizontal es el tamaño de los rellenos izquierdo y derecho.
Ejemplo:
padding: 1em 2em
El relleno mide 1 renglón arriba y abajo, 2 renglones a la
izquierda y derecha.
padding: tam_arr tam_der tam_ab tam_izq
tam_arr es el tamaño del relleno superior.
tam_der es el tamaño del relleno derecho.
tam_ab es el tamaño del relleno inferior.
tam_izq es el tamaño del relleno izquierdo.
Ejemplo:
padding: 3em 2em 4em 1em
El relleno mide 3 renglones arriba, 2 a la derecha, 4 abajo
y 1 a la izquierda.
| 1 | <!DOCTYPE html> |
| 2 | <html lang="es"> |
| 3 | <head> |
| 4 | <meta charset="UTF-8"> |
| 5 | <meta name="viewport" |
| 6 | content="width=device-width"> |
| 7 | <title>Relleno</title> |
| 8 | <style> |
| 9 | h1 { |
| 10 | padding-top: 0.5rem; |
| 11 | padding-left: 1rem; |
| 12 | padding-bottom: 1.5rem; |
| 13 | padding-right: 2rem; |
| 14 | background-color: cyan; |
| 15 | } |
| 16 | |
| 17 | p { |
| 18 | padding: 0.5rem 2rem; |
| 19 | background-color: yellow; |
| 20 | } |
| 21 | |
| 22 | div { |
| 23 | padding: 1rem; |
| 24 | background-color: red; |
| 25 | } |
| 26 | |
| 27 | footer { |
| 28 | padding: |
| 29 | 0.5rem 1rem 3rem 2rem; |
| 30 | background-color: |
| 31 | yellowgreen; |
| 32 | } |
| 33 | </style> |
| 34 | </head> |
| 35 | <body> |
| 36 | <h1>Relleno</h1> |
| 37 | <p>Párrafo</p> |
| 38 | <div>Div</div> |
| 39 | <footer>Footer</footer> |
| 40 | </body> |
| 41 | </html> |