Sintassi

Significato dei valori principali:

• lunghezza: Imposta una distanza fissa dal bordo sinistro, ad esempio 20px, 1em, 2rem.

• percentuale: Percentuale della larghezza del contenitore padre, es. margin-left: 10%;.

• auto: Lascia al browser il calcolo del margine. Spesso usato per centrare gli elementi quando combinato con larghezza definita.

• inherit: Eredita il valore dal genitore.

• initial / unset: Ripristina il valore iniziale o annulla le regole precedenti.

Esempio proprietà: margin-left

Codice Esempio: margin-left

CODE: CSS

1. .margin-left-container {

2.   background-color: #f0f0f0;

3.   padding: 20px;

4. }

6. .margin-left-box {

7.   background-color: #e06c75;

8.   color: white;

9.   padding: 15px;

10.   margin-left: 50px;

11.   font-size: 18px;

12.   border-radius: 5px;

13. }

Contenuto Esempio: margin-left

  
  <style>
    .margin-left-container {
      background-color: #fdf6e3;
      border: 2px dashed #50a14f;
    }

    .margin-left-box {
      background-color: #e06c75;
      color: white;
      padding: 15px;
      margin-left: 50px;
      font-size: 18px;
      border-radius: 5px;
    }
  </style>

  <div class="margin-left-container">
    <div class="margin-left-box">
      Elemento spostato con margin-left: 50px;
    </div>
  </div>
  

Leggenda Proprietà:

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser