Czym różni się właściwość display: block od właściwości display: inline?

Elementy z display: block zajmują całą dostępną szerokość, zaczynają się od nowej linii i układają się pionowo. Można ustawiać width, height, margin (we wszystkich stronach) i padding (we wszystkich stronach).

Elementy z display: inline zajmują dokładnie tyle miejsca, ile potrzebuje ich zawartość, znajdują się w przepływie tekstu i układają się poziomo. Nie można ustawiać width i height. W poziomie można ustawiać margin i padding, w pionie tylko padding. margin-top i margin-bottom nie mają zastosowania.

/* Przykład display: block */
div {
  display: block;
  width: 100px;
  height: 50px;
  margin: 10px;
  padding: 5px;
  background-color: lightblue;
}

/* Przykład display: inline */
span {
  display: inline;
  /* width i height nie mają zastosowania */
  margin: 10px; /* margin-top i margin-bottom są ignorowane */
  padding: 5px;
  background-color: lightgreen;
}