IL ' margine superiore ” aiuta molti sviluppatori a creare layout reattivi e posizionare elementi HTML. L'utilizzo della proprietà 'margin-top' fornisce un maggiore controllo sugli elementi HTML, aggiunge separazione visiva e aiuta a creare progetti reattivi migliori. Questa guida illustra la proprietà margin-top con l'implementazione pratica in CSS.
- Che cos'è la proprietà 'margin-top'?
- Utilizzare la proprietà 'margin-top' con un valore positivo
- Utilizzare la proprietà 'margin-top' con un valore negativo
Che cos'è la proprietà 'margin-top'?
IL ' margine superiore La proprietà ” viene utilizzata per creare spazio extra tra gli elementi HTML. Può essere impostato sia con valori positivi che negativi. Questi valori sono impostati in base alle esigenze del design e aiutano a prevenire sovrapposizioni e regolare la spaziatura tra gli elementi HTML.
Come utilizzare la proprietà 'margin-top' con un valore positivo?
La proprietà 'margin-top' con un valore positivo aggiunge ulteriore spazio dalla posizione superiore verso il centro dell'elemento HTML selezionato. Il valore fornito può essere in pixel, percentuale, rem o in valori globali come auto, inherit, unset, ecc. Esaminiamo un esempio per una migliore comprensione:
Esempio: utilizzo del valore positivo
Supponiamo un file HTML che crei un ' Dopo la creazione della struttura HTML, applica le proprietà CSS al ' positivo ' classe: Nello snippet di codice sopra: Dopo l'esecuzione del suddetto frammento di codice, la pagina web si presenta così: La gif sopra illustra l'effetto dell'impostazione del valore della proprietà margin-top sulla pagina web. IL ' margine superiore ” proprietà con un valore negativo imposta una spaziatura extra dalla posizione in alto opposta al centro o verso l'esterno della pagina rispetto all'elemento HTML selezionato. Viene utilizzato principalmente per creare effetti di sovrapposizione o nel posizionamento dell'elemento HTML. Facciamo un esempio per una migliore comprensione. Esempio: utilizzo del valore negativo Supponiamo un file HTML che crei un ' La descrizione del suddetto frammento di codice è descritta di seguito: Dopo l'esecuzione dello snippet di codice sopra, la pagina web appare così: La gif sopra mostra l'effetto che si verifica sul design della pagina web impostando il valore negativo per la proprietà margin-top. IL ' margine superiore La proprietà ” viene utilizzata per creare spazio extra tra gli elementi HTML. Può essere impostato sia con valori positivi che negativi. Se alla proprietà 'margin-top' viene assegnato un valore positivo, lo spazio extra viene aggiunto verso il centro della pagina Web o dell'elemento HTML selezionato. In caso di valore “negativo” lo spazio viene aggiunto ma verso l'esterno della pagina. Questo articolo mostra cos'è la proprietà margin-top nei CSS.
< corpo >
< div classe = 'positivo' >
< P > Viene assegnato il margine superiore con un valore positivo P >
div >
corpo >
< stile >
.positivo {
larghezza: 300px;
altezza: 200px;
colore di sfondo: verde bosco;
dimensione carattere: 20px;
colore: #F F F;
margine superiore: 50px;
}
stile >
Come utilizzare la proprietà 'margin-top' con un valore negativo?
.negativo {
colore bianco;
text-align: centro;
colore di sfondo: rosso ;
margine superiore: -30 pixel ;
imbottitura: 30px;
altezza: 100px;
}
stile >
< corpo >
< div classe = 'negativo' >
Viene assegnato il valore negativo per Proprietà con margine superiore
div >
corpo >
Conclusione