Spaziatura interna

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 34 di 76.

In CSS, il padding è lo spazio tra il contenuto di un elemento e il suo bordo. Il padding serve a creare spazio visivo intorno al contenuto, rendendolo più leggibile e gradevole alla vista. Puoi controllare il padding su tutti e quattro i lati di un elemento (superiore, destro, inferiore e sinistro) in modo indipendente oppure usando la notazione abbreviata.

Ecco la sintassi di base per usare la proprietà padding:

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

padding-top: Il padding sul lato superiore dell'elemento.
padding-right: Il padding sul lato destro dell'elemento.
padding-bottom: Il padding sul lato inferiore dell'elemento.

padding-left: Il padding sul lato sinistro dell'elemento.
value: Il valore di padding desiderato, che può essere specificato in pixel (px), em (em), percentuali (%) o altre unità CSS valide.

Puoi anche usare la notazione abbreviata per impostare il padding di tutti e quattro i lati contemporaneamente, ad esempio:

p {
    padding: 20px; /* Applica lo stesso padding a tutti e quattro i lati */
}

div {
    padding: 10px 25px; /* Imposta il padding superiore e inferiore a 10px e quello sinistro e destro a 25px */
}

.button {
    padding: 15px 30px 10px 5px; /* Imposta il padding per ciascun lato singolarmente */
}

In questo esempio, tutti gli elementi <p> (paragrafo) hanno un padding di 20px su tutti i lati, tutti gli elementi <div> hanno un padding superiore e inferiore di 10px e un padding sinistro e destro di 25px, e tutti gli elementi con la classe button hanno un padding superiore di 15px, un padding destro di 30px, un padding inferiore di 10px e un padding sinistro di 5px.

Sfida

Facile

Ti viene dato un documento HTML con due intestazioni. Il tuo compito è usare la proprietà padding per aggiungere spazio intorno al contenuto di questi elementi. Segui i passaggi seguenti:

Scrivi una regola CSS che selezioni l'elemento <h1>. Imposta padding a 20px su tutti i lati.
Scrivi una regola CSS che selezioni l'elemento <h2>. Imposta padding superiore e inferiore a 10px e padding sinistro e destro a 30px.

Provalo tu

<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>