Podemos inicializar el padding de un elemento HTML en forma resumida con:
padding:padding-top padding-right padding-bottom padding-left
Un ejemplo:
padding: 5px 10px 12px 3px;
si indicamos un único valor se aplica a los cuatro lados:
padding: 1px;
Si indicamos dos valores, el primero se aplica a la parte superior e inferior y el segundo valor a los lados izquierdo y derecho:
padding: 5px 10px;
Veamos un ejemplo con una página:
<!DOCTYPE html> <html> <head> <title>Problema</title> <link rel="StyleSheet" href="estilos.css" type="text/css"> </head> <body> <p class="comentarios">Esto es una prueba para ver el funcionamiento de la propiedad padding. Esto es una prueba para ver el funcionamiento de la propiedad padding. Esto es una prueba para ver el funcionamiento de la propiedad padding. Esto es una prueba para ver el funcionamiento de la propiedad padding. Esto es una prueba para ver el funcionamiento de la propiedad padding. Esto es una prueba para ver el funcionamiento de la propiedad padding. Esto es una prueba para ver el funcionamiento de la propiedad padding. </p> </body> </html>Luego el archivo CSS:
.comentarios {
background-color:#dddddd;
padding:5px 30px;
}
Con este ejemplo, el párrafo tiene 5 píxeles de separación con el borde en la parte inferior y superior, y a la izquierda y derecha tiene 30 píxeles.