La proprietà del margine in CSS ha spiegato

I margini sono gli spazi creati (per un'estetica migliore) attorno a qualsiasi elemento. Il margine viene automaticamente impostato dal browser utilizzato. Tuttavia, i margini definiti dall'utente possono essere creati utilizzando la proprietà del margine CSS. I margini hanno quattro lati (di solito dipende dall'elemento) e il margine di ciascun lato può essere impostato usando la proprietà del margine.

La proprietà di margine consente di impostare i margini sui lati individualmente o è possibile creare margini per più lati contemporaneamente. In questa guida descrittiva, viene spiegata la proprietà del margine in CSS e ha i seguenti risultati di apprendimento.

• Funzionamento di proprietà marginali in CSS
• Funzionamento della proprietà di stenografia del margine
• Utilizzo della proprietà del margine con esempi

Come funziona la proprietà del margine in CSS

La proprietà di margine in CSS può funzionare in varie circostanze in cui è necessario dare margini ai lati (individualmente) o dare margini usando la proprietà stenografia (più lati contemporaneamente). Il lavoro in entrambe le situazioni è discusso qui.

Il margine può essere somministrato ai singoli lati usando la sintassi di conseguenza.

selettore margin-top: value; // sul lato superiore
selettore margin-bottom: value; // sul lato inferiore
selettore margin-left: value; // sul lato sinistro
Selector margin-right: value; // sul lato destro

Il selettore può essere qualsiasi elemento mentre il valore è il numero utilizzato per fornire un limite di margine specifico. Il valore può essere utilizzato con diverse unità di misurazione i.e., Auto, lunghezza (PX, CM, PT), percentuale (%) e eredità (secondo la classe genitore). Il PX è la misurazione assoluta mentre l'EM, il REM e la percentuale sono le misure relative e sono migliori (rispetto a PX) adatti a risultati reattivi.

A parte i margini di questi individui, la proprietà stentata del margine può anche essere utilizzata per dare i margini a più lati contemporaneamente. La sintassi della proprietà di stenografia del margine è fornita di seguito:

selettore margine: valore1 valore2 valore3 valore;

Value1, valore2, valore3 e valore4 rappresentano i lati superiore, destra, in basso e sinistra di un elemento.

Come utilizzare la proprietà a margine in CSS

Questa sezione fornisce alcuni esempi che mostrano l'uso della proprietà del margine in CSS.

Esempio 1: dare margini ai singoli lati
In questo esempio, il codice scritto di seguito viene utilizzato per dare margini ai singoli lati.

Proprietà del margine in CSS

Usando il margine a destra di 5px
Usando il fondo di margine di 5px
Utilizzando la parte superiore del margine di 5px
Usando il margine sinistro di 5px

La descrizione del codice è fornita di seguito

• Uno stile CSS per Div è definito dando larghezza, proprietà float e bordo
• Vengono create quattro classi CSS denominate "top", "rig", "bot" e "lef" che contiene il margine (5px) in ogni classe
• Queste quattro classi sono utilizzate all'interno delle divisioni (Div)

L'immagine del codice è mostrata di seguito

Produzione:

Esempio 2: dare margini a più lati contemporaneamente
L'esempio sopra ha fornito i margini ai singoli lati. Il seguente codice dà margine a più lati contemporaneamente

Proprietà del margine in CSS

Usando un margine del 5% su tutti i lati
Utilizzando il margine del 5% sulla parte superiore/inferiore e il 10% a sinistra/destra
Utilizzando margine di 2 e 3em in alto e in basso e 4em a destra/sinistra
Usando un margine di 2,4,6,8 pixel in alto, a destra, in basso, a sinistra rispettivamente

Il codice sopra è descritto come

• Vengono create quattro lezioni CSS chiamate "Sing", "DubB", "Trip" e "All"
• La classe "Sin" dà un margine di% a tutti i lati e la classe "Dubi" dà un margine del 5% in alto/in basso e il 10% a destra/sinistra
• La classe "Trip" dà un margine di 2em e 4em in cima a un fondo e 3em a destra/sinistra
• La classe "All" dà un margine di 2, 4, 6 e 8px in alto, a destra, in basso e ai lati sinistro

L'immagine del codice è mostrata di seguito

Produzione:

Dagli esempi di cui sopra, avresti imparato l'applicabilità della proprietà del margine nei seguenti contesti:

• applicare la proprietà di margine su tutti i lati individualmente
• Dare margini utilizzando la proprietà shorthand del margine

Conclusione

La proprietà del margine in CSS viene praticata dando margini in base alle proprietà definite dall'utente. Questo articolo dimostra il funzionamento e l'utilizzo della proprietà del margine in CSS. La proprietà del margine in CSS può essere utilizzata per dare margini su ciascun lato individualmente e la proprietà stentata del margine può essere utilizzata per dare margini a più lati contemporaneamente.