Koja je razlika između svojstva display: block i svojstva display: inline?

Elementi sa display: block zauzimaju celokupnu dostupnu širinu, počinju u novom redu i postavljaju se vertikalno. Mogu se postaviti width, height, margin (za sve strane) i padding (za sve strane).

Elementi sa display: inline zauzimaju tačno onoliko mesta koliko im je potrebno za sadržaj, nalaze se u toku teksta i poravnavaju se horizontalno. Nije moguće postaviti width i height. Horizontalno se mogu postaviti margin i padding, vertikalno samo padding. margin-top i margin-bottom se ne primenjuju.

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

/* Primer display: inline */
span {
  display: inline;
  /* width i height se ne primenjuju */
  margin: 10px; /* margin-top i margin-bottom se ignorišu */
  padding: 5px;
  background-color: lightgreen;
}