Teoría
Teoría

Relleno: la propiedad padding

La propiedad padding define el relleno de un bloque: el espacio interior que separa el borde del bloque de su contenido.

Para definir el relleno de cada lado, usa las propiedades padding-top, padding-right, padding-bottom y padding-left:

Relleno

También existe la propiedad abreviada padding, que permite definir el relleno de todos los lados a la vez:

padding: 10px;
padding: 5px 10px;
padding: 5px 10px 15px;
padding: 5px 10px 15px 20px;

El mismo relleno en todos los lados.
5px arriba y abajo, 10px a la derecha y a la izquierda.
5px arriba, 10px a la izquierda y a la derecha, 15px abajo.
Un relleno distinto en cada lado, en este orden: arriba, derecha, abajo, izquierda.

Es mejor no asignar relleno vertical a las cajas en línea, porque su comportamiento puede resultar inesperado.

En este ejercicio, el relleno de los bloques se muestra transparente.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8"> <title>Relleno: la propiedad padding</title> <link rel="stylesheet" href="setting.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="p1">Bloque 1</div> <div class="p2">Bloque 2</div> <div class="p3">Bloque 3</div> <div> <span class="p1">Texto 1</span> <span class="p2">Texto 2</span> <span class="p3">Texto 3</span> </div> </body> </html>

CSS

div { width: 280px; height: 20px; margin: 20px; font-size: 12px; } .p1 { } .p2 { } .p3 { }

ObjetivosRealizado

Añade la propiedad padding a las siguientes reglas CSS:

Para la clase p1: padding: 10px;.
Para la clase p2: padding: 10px 20px;.
Para la clase p3: padding: 10px 20px 30px;.

Observa cómo se comportan los elementos en línea.