Relleno

Parte de la sección Estilos con CSS del Journey de HTML de Coddy. Lección 34 de 76.

En CSS, el relleno es el espacio entre el contenido de un elemento y su borde. El relleno se utiliza para crear un espacio visual alrededor del contenido, lo que lo hace más legible y atractivo visualmente. Puedes controlar el relleno 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 relleno 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 a 10px, y el izquierdo y derecho a 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 relleno de 20px en todos los lados, todos los elementos <div> tienen un relleno superior e inferior de 10px y un relleno izquierdo y derecho de 25px, y todos los elementos con la clase button tienen un relleno superior de 15px, un relleno derecho de 30px, un relleno inferior de 10px y un relleno 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.

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>