Tutorial de CSS - Temarios

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>
  <meta charset="UTF-8">
  <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.

22 - Propiedades relacionadas al padding (FORMATO RESUMIDO)

Retornar