Čím se liší vlastnost display: block od vlastnosti display: inline?

Prvky s display: block zabírají celou dostupnou šířku, začínají na novém řádku a jsou uspořádány vertikálně. Lze nastavit width, height, margin (všechny strany) a padding (všechny strany).

Prvky s display: inline zabírají přesně tolik místa, kolik potřebuje jejich obsah, jsou v textovém toku a jsou zarovnány horizontálně. Nelze nastavit width a height. Horizontálně lze nastavit margin a padding, vertikálně pouze padding. margin-top a margin-bottom se nepoužívají.

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

/* Příklad display: inline */
span {
  display: inline;
  /* width a height nejsou použitelné */
  margin: 10px; /* margin-top a margin-bottom jsou ignorovány */
  padding: 5px;
  background-color: lightgreen;
}