Каква е разликата между свойството display: block и свойството display: inline?

Елементите с display: block заемат цялата налична ширина, започват на нов ред и се подреждат вертикално. Могат да се зададат width, height, margin (за всички страни) и padding (за всички страни).

Елементите с display: inline заемат точно толкова място, колкото е необходимо за съдържанието им, се намират в текстовия поток и се подреждат хоризонтално. Не може да се зададе width и height. Хоризонтално могат да се зададат margin и padding, вертикално само padding. margin-top и margin-bottom не се прилагат.

/* Пример display: block */
div {
  display: block;
  width: 100px;
  height: 50px;
  margin: 10px;
  padding: 5px;
  background-color: lightblue;
}

/* Пример display: inline */
span {
  display: inline;
  /* width и height не се прилагат */
  margin: 10px; /* margin-top и margin-bottom се игнорират */
  padding: 5px;
  background-color: lightgreen;
}