Margine
Margine
Margine è una lezione HTML for Kids gratuita su CoddyKit. Questa è la lezione 1 di 1. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML for Kids, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML for Kids include 1 lezioni in totale.
Introduzione
Il margine è uno degli argomenti più importanti di CSS.
I margini sono gli spazi che creiamo intorno ai bordi di un elemento.
Spiegazione dei lati del margine
Indipendentemente dal tipo di elemento, quando si crea un margine non bisogna considerarlo come un'impostazione su 4 lati (superiore, destro, inferiore e sinistro).
<style>
.box{
margin-top:10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;
width:100px;
height:100px;
background-color: powderblue;
}
</style>
<div class="box">Box with margin</div>
<div class="box">Box with margin</div>Avviso
Così come possiamo assegnare un valore specifico a margin, possiamo anche assegnarle un valore percentuale.
Avviso
Oltre ad assegnare un valore specifico al margine, è possibile assegnargli anche un valore percentuale.
Abbreviazione del margine
Nell'esempio precedente, era necessario scrivere 4 righe di codice per impostare il margine su tutti i lati di un riquadro.
CSS mette a disposizione una sintassi abbreviata per il margine, che consente di scrivere codice più breve.
Dopo aver definito la proprietà margin, possiamo assegnare i valori del margine separandoli con uno spazio, rispettivamente per il lato superiore, destro, inferiore e sinistro (cioè in senso orario).
<style>
.box {
margin: 10px 10px 10px 10px;
background-color: powderblue;
}
</style>
<div class="box">Box with margin</div>
Avviso sui margini negativi
I margini possono assumere un valore negativo. Il padding, che vedremo nella lezione successiva, non può avere un valore negativo.
margin auto
Utilizzeremo il valore auto della proprietà margin per centrare orizzontalmente i nostri elementi. Indipendentemente dalla risoluzione dello schermo, l'elemento verrà centrato orizzontalmente.
Supponiamo che lo schermo sia largo 1200px e che il nostro elemento sia largo 400px. L'elemento verrà centrato, con spazi di 400px a sinistra e a destra.
<style>
.box {
width:200px;
margin: auto;
background-color: powderblue;
}
</style>
<div class="box">
This element will be horizontally
centered because
it has margin: auto;
</div>Congratulazioni
Congratulazioni 🎉
In questa sezione abbiamo imparato i margini CSS.
Nella sezione successiva impareremo i padding CSS.
Impara HTML con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 16
- Lezioni
- 35
Domande Frequenti
La lezione «Margine» è gratuita?
Sì — il testo completo di «Margine» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML for Kids, passa a CoddyKit PRO. Il corso HTML for Kids include 1 lezioni in totale.
Cosa imparerò in «Margine»?
Margine Eserciti HTML for Kids con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML for Kids?
Non è richiesta alcuna esperienza precedente. HTML for Kids su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 1.
Quanto tempo richiede la lezione «Margine»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML for Kids?
Sì. Ogni lezione HTML for Kids include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.