Margin e Padding

Margin e Padding controllano lo spazio intorno e dentro gli elementi.

Differenza chiave

  • Margin: spazio ESTERNO all'elemento (tra elementi)
  • Padding: spazio INTERNO all'elemento (tra bordo e contenuto)

Sintassi

/* Tutti i lati uguali */
margin: 20px;
padding: 15px;

/* Verticale | Orizzontale */
margin: 10px 20px;

/* Top | Right | Bottom | Left */
margin: 10px 20px 15px 25px;

/* Singoli lati */
margin-top: 10px;
padding-left: 20px;

Centrare elementi

.container {
  margin: 0 auto; /* Centra orizzontalmente */
  max-width: 1200px;
}

Hai trovato utile quest'articolo?

  • Introduzione al CSS

    Il CSS (Cascading Style Sheets) è il linguaggio utilizzato per definire lo stile e la presentazione ...
  • Selettori CSS di base

    I selettori CSS permettono di identificare gli elementi HTML a cui applicare gli stili.Tipi di selet...
  • Proprietà color e background

    Le proprietà color e background sono fondamentali per definire l'aspetto visivo degli elementi.Propr...
  • Box Model CSS

    Il Box Model è il concetto fondamentale che descrive come ogni elemento HTML è rappresentato come un...
  • Proprietà Border

    La proprietà border definisce il bordo degli elementi HTML.Sintassi completa.box { border-width: 2...