Display: block, inline, inline-block

La proprietà display determina come un elemento viene visualizzato nel flusso del documento.

display: block

  • Occupa tutta la larghezza disponibile
  • Inizia su una nuova riga
  • Esempi: div, p, h1-h6, section

display: inline

  • Occupa solo lo spazio necessario
  • Non inizia su nuova riga
  • Non accetta width/height
  • Esempi: span, a, strong

display: inline-block

  • Come inline ma accetta width/height
  • Utile per bottoni e badge
.badge {
  display: inline-block;
  padding: 5px 10px;
  background: #007bff;
  color: white;
  border-radius: 4px;
}

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...
  • Margin e Padding

    Margin e Padding controllano lo spazio intorno e dentro gli elementi.Differenza chiaveMargin: spazio...
  • Box Model CSS

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