Aký je rozdiel medzi vlastnosťou display: block a vlastnosťou display: inline?

Prvky s display: block zaberajú celú dostupnú šírku, začínajú na novom riadku a sú usporiadané vertikálne. Môžete nastaviť width, height, margin (všetky strany) a padding (všetky strany).

Prvky s display: inline zaberajú presne toľko miesta, koľko potrebuje ich obsah, nachádzajú sa v texte a sú zarovnané horizontálne. Nie je možné nastaviť width a height. Horizontálne je možné nastaviť margin a padding, vertikálne iba padding. margin-top a margin-bottom sa nepoužívajú.

/* Príklad display: block */
div {
  display: block;
  width: 100px;
  height: 50px;
  margin: 10px;
  padding: 5px;
  background-color: lightblue;
}

/* Príklad display: inline */
span {
  display: inline;
  /* width a height sa nepoužívajú */
  margin: 10px; /* margin-top a margin-bottom sa ignorujú */
  padding: 5px;
  background-color: lightgreen;
}