Kāda ir atšķirība starp īpašībām display: block un display: inline?

Elementi ar display: block aizņem visu pieejamo platumu, sākas jaunā rindā un ir izvietoti vertikāli. Var iestatīt width, height, margin (visām pusēm) un padding (visām pusēm).

Elementi ar display: inline aizņem tieši tik daudz vietas, cik nepieciešams to saturam, atrodas teksta plūsmā un ir horizontāli sakārtoti. Nav iespējams iestatīt width un height. Horizontāli var iestatīt margin un padding, vertikāli tikai padding. margin-top un margin-bottom netiek piemēroti.

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

/* Piemērs display: inline */
span {
  display: inline;
  /* width un height netiek piemēroti */
  margin: 10px; /* margin-top un margin-bottom tiek ignorēti */
  padding: 5px;
  background-color: lightgreen;
}