Se puede especificar con las siguientes propiedades:
padding-top
Solo especifica el tamaño del relleno en la parte superior de la caja.
Ejemplo:
padding-top: 3vh
padding-bottom
Solo especifica el tamaño del relleno en la parte inferior de la caja.
Ejemplo:
padding-bottom: 50%
padding-left
Solo especifica el tamaño del relleno en el lado izquierdo de la caja.
Ejemplo:
padding-left: 8px
padding-right
Solo especifica el tamaño del relleno en el lado derecho de la caja.
Ejemplo:
padding-right: 3vw
padding: tamaño
Especifica 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> |