Mi a különbség a display: block és a display: inline tulajdonság között?

A display: block elemek elfoglalják a rendelkezésre álló teljes szélességet, új sorban kezdődnek, és függőlegesen rendeződnek. Beállítható width, height, margin (minden oldalra) és padding (minden oldalra).

A display: inline elemek pontosan annyi helyet foglalnak el, amennyire tartalmuknak szüksége van, a szövegfolyamban helyezkednek el, és vízszintesen rendeződnek. Nem lehet width és height értékeket beállítani. Vízszintesen margin és padding állítható, függőlegesen csak padding. A margin-top és margin-bottom nem alkalmazható.

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

/* Példa display: inline */
span {
  display: inline;
  /* width és height nem alkalmazható */
  margin: 10px; /* margin-top és margin-bottom figyelmen kívül hagyva */
  padding: 5px;
  background-color: lightgreen;
}