Padding

Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 34 de 76.

En CSS, el padding es el espacio entre el contenido de un elemento y su borde. El padding se utiliza para crear un respiro visual alrededor del contenido, haciéndolo más legible y visualmente atractivo. Puedes controlar el padding en los cuatro lados de un elemento (superior, derecho, inferior e izquierdo) de forma independiente o utilizando la notación abreviada.

Aquí tienes la sintaxis básica para usar la propiedad padding:

selector {
    padding-top: value;
    padding-right: value;
    padding-bottom: value;
    padding-left: value;
}

padding-top: El relleno en la parte superior del elemento.
padding-right: El relleno en el lado derecho del elemento.
padding-bottom: El relleno en la parte inferior del elemento.

padding-left: El relleno en el lado izquierdo del elemento.
value: El valor de relleno deseado, que puede especificarse en píxeles (px), ems (em), porcentajes (%) u otras unidades CSS válidas.

También puedes usar la notación abreviada para establecer el padding de los cuatro lados a la vez, por ejemplo:

p {
    padding: 20px; /* Aplica el mismo padding a los cuatro lados */
}

div {
    padding: 10px 25px; /* Establece el padding superior e inferior en 10px, y el padding izquierdo y derecho en 25px */
}

.button {
    padding: 15px 30px 10px 5px; /* Establece el padding para cada lado individualmente */
}

En este ejemplo, todos los elementos <p> (párrafo) tienen un padding de 20px en todos los lados, todos los elementos <div> tienen un padding superior e inferior de 10px y un padding izquierdo y derecho de 25px, y todos los elementos con la clase button tienen un padding superior de 15px, un padding derecho de 30px, un padding inferior de 10px y un padding izquierdo de 5px.

Desafío

Fácil

Se te proporciona un documento HTML con dos encabezados. Tu tarea es usar la propiedad padding para añadir espacio alrededor del contenido de estos elementos. Sigue los pasos a continuación:

Escribe una regla CSS que apunte al elemento <h1>. Establece el padding a 20px en todos los lados.
Escribe una regla CSS que apunte al elemento <h2>. Establece el padding superior e inferior a 10px y el padding izquierdo y derecho a 30px.

Hoja de referencia

El padding de CSS crea espacio entre el contenido de un elemento y su borde.

Propiedades de padding individuales:

selector {
    padding-top: value;
    padding-right: value;
    padding-bottom: value;
    padding-left: value;
}

Notación abreviada:

/* El mismo padding en todos los lados */
padding: 20px;

/* Superior/inferior: 10px, Izquierda/derecha: 25px */
padding: 10px 25px;

/* Superior, Derecha, Inferior, Izquierda individualmente */
padding: 15px 30px 10px 5px;

Los valores se pueden especificar en píxeles (px), ems (em), porcentajes (%) u otras unidades de CSS válidas.

Pruébalo tú mismo

<html>
<head>
    <title>Padding</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1 style="border:2px solid black;">The Box Model</h1>
    <h2 style="border:2px solid black;">It helps in controlling spacing and layout in web design! </h2>
</body>
</html>