Margine CSS

I margini di questo elemento sono 70px.

Prova a farlo tu stesso

Margine CSS

CSS margin La proprietà viene utilizzata per creare spazio intorno all'elemento al di fuori di qualsiasi bordo definito.

Attraverso CSS, è possibile controllare completamente i margini. Alcune proprietà possono essere utilizzate per impostare i margini di ogni lato (superiore, destro, inferiore e sinistro) dell'elemento.

Margin - Lato singolo

CSS ha proprietà per specificare i margini di ogni lato dell'elemento:

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

Tutte le proprietà margin possono impostare i seguenti valori:

  • auto - Il browser calcola i margini
  • length - Specifica i margini con unità come px, pt, cm ecc.
  • % - Specifica i margini come percentuale della larghezza dell'elemento contenitore
  • inherit - Specifica che i margini devono essere ereditati dal padre dell'elemento

Suggerimento:Permettono valori negativi.

Esempio

Impostare margini diversi per tutte e quattro le quattro parti del elemento <p>:

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

Prova a farlo tu stesso

Margin - Abbreviazione di proprietà

Per ridurre il codice, è possibile specificare tutte le proprietà margin in un'unica proprietà.

margin La proprietà è l'abbreviazione delle seguenti proprietà margin esterni:

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

Il meccanismo di lavoro è il seguente:

Se margin La proprietà ha quattro valori:

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

Esempio

L'abbreviazione di proprietà margin impostata per quattro valori:

p {
  margin: 25px 50px 75px 100px;
}

Prova a farlo tu stesso

Se margin La proprietà ha impostato tre valori:

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

Esempio

Utilizzare l'abbreviazione di proprietà margin impostata per tre valori:

p {
  margin: 25px 50px 75px;
}

Prova a farlo tu stesso

Se margin La proprietà ha impostato due valori:

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

Esempio

Utilizzare l'abbreviazione di proprietà margin impostata per due valori:

p {
  margin: 25px 50px;
}

Prova a farlo tu stesso

Se margin La proprietà ha impostato un valore:

  • margin: 25px;
    • Tutti e quattro i margini esterni sono 25px

Esempio

Utilizzare l'abbreviazione di proprietà margin per impostare un valore:

p {
  margin: 25px;
}

Prova a farlo tu stesso

auto valore

Puoi impostare l'attributo margin autoper centrare l'elemento nel contenitore.

Pertanto, l'elemento occuperà la larghezza specificata e lo spazio rimanente sarà distribuito uniformemente tra i margini laterali.

Esempio

Uso margin: auto:

div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}

Prova a farlo tu stesso

Valore inherit

Questo esempio fa sì che il margine esterno sinistro dell'elemento <p class="ex1"> derivi dal genitore (<div>):

Esempio

Uso del valore inherit:

div {
  border: 1px solid red;
  margin-left: 100px;
}
p.ex1 {
  margin-left: inherit;
}

Prova a farlo tu stesso

Leggi di più

Libri di Studio:Modello di Cornice: Margine Esterno CSS