Margini

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

In CSS, il margine è lo spazio attorno a un elemento, al di fuori di tutti i bordi definiti. È un'altra parte essenziale del modello a riquadri. I margini servono a creare spazio tra gli elementi, separandoli l'uno dall'altro.

Puoi controllare il margine su tutti e quattro i lati di un elemento (superiore, destro, inferiore e sinistro) indipendentemente o usando la notazione abbreviata.

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

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

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

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

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

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

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

.button {
    margin: 15px 30px 10px 5px;/* Imposta il margine di ciascun lato singolarmente */
}

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

Sfida

Facile

Ti viene fornito un documento HTML con un'intestazione (<h1>) e un elemento divisione (<div>). Il tuo compito è usare la proprietà margin per aggiungere spazio intorno a questi elementi. Segui i passaggi seguenti:

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

Provalo tu

<html>
<head>
    <title>Margins</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1 style="border:2px solid black;">Mastering CSS Margins</h1>
    <div style="border:2px solid black;">Margins create space around elements.</div>
</body>
</html>