Gli ultimi tutorial di sviluppo web
 

CSS margini

❮ Precedente Successivo Capitolo ❯

CSS Margin Proprietà

I CSS margin proprietà vengono utilizzati per generare lo spazio attorno agli elementi.

I margin proprietà impostare la dimensione dello spazio bianco all'esterno del bordo.

Questo elemento ha un margin di 80px.

CSS Margins

I CSS margin proprietà impostare la dimensione dello spazio bianco all'esterno del bordo.

NotaNota: I margins sono completamente trasparenti - e non può avere un colore di sfondo!

Con i CSS, si ha il pieno controllo sui margins . Ci sono proprietà CSS per l'impostazione del margin per ogni lato di un elemento (superiore, destro, inferiore e sinistra).

Margin - singoli lati

CSS ha proprietà per specificare il margin per ogni lato di un elemento:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Tutti i margin proprietà possono avere i seguenti valori:

  • auto - il browser calcola il margin
  • lunghezza - specifica un margin in px, pt, cm , etc.
  • % - Specifica un margin in% della larghezza dell'elemento di contenimento
  • ereditare - specifica che il margin dovrebbe essere ereditata dall'elemento genitore
NotaNota: È anche possibile utilizzare valori negativi per margins ;a sovrapporsi contenuti.

L'esempio seguente imposta diversi margins per tutti e quattro i lati di un <p> elemento:

Esempio

p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}
Prova tu stesso "

L'esempio seguente consente di sinistra margin essere ereditata dall'elemento genitore:

Esempio

div.container {
    border: 1px solid red;
    margin-left: 100px;
}

p.one {
    margin-left: inherit;
}
Prova tu stesso "

Margin - Stenografia Proprietà

Per accorciare il codice, è possibile specificare tutti i margin proprietà in una proprietà.

Il margin proprietà è una proprietà scorciatoia per i seguenti singoli margin proprietà:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Esempio

p {
    margin: 100px 150px 100px 80px;
}
Prova tu stesso "

Quindi, ecco come funziona:

Se il margin struttura dispone di quattro valori:

  • margin : 25px 50px 75px 100px;
    • margine superiore è 25px
    • margine destro è 50px
    • margine inferiore è 75px
    • margine sinistro è 100px

Se il margin struttura dispone di tre valori:

  • margin : 25px 50px 75px;
    • margine superiore è 25px
    • i margini destro e sinistro sono 50px
    • margine inferiore è 75px

Se il margin proprietà ha due valori:

  • margin : 25px 50px;
    • i margini superiore e inferiore sono 25px
    • i margini destro e sinistro sono 50px

Se il margin proprietà ha un valore:

  • margin : 25px;
    • tutti e quattro i margini sono 25px

L'utilizzo del valore auto

È possibile impostare il margin proprietà di auto orizzontalmente centrare l'elemento all'interno del suo contenitore.

L'elemento sarà poi prendere la larghezza specificata, e lo spazio rimanente sarà suddiviso in parti uguali tra destra e sinistra margins :

Esempio

div {
    width: 300px;
    margin: auto;
    border: 1px solid red;
}
Prova tu stesso "

Mettiti alla prova con esercizi!

Esercizio 1 » Esercizio 2» Esercizio 3 » Esercizio 4»

Tutte le proprietà CSS dei margini

Proprietà Descrizione
margin Una proprietà scorciatoia per settare i margin proprietà in una dichiarazione
margin-bottom Imposta fondo margin di un elemento
margin-left Imposta sinistra margin di un elemento
margin-right Imposta il giusto margin di un elemento
margin-top Imposta la parte superiore margin di un elemento

❮ Precedente Successivo Capitolo ❯