Kuo skiriasi display: block savybė nuo display: inline savybės?

Elementai su display: block užima visą prieinamą plotį, pradeda naujoje eilutėje ir išsidėsto vertikaliai. Galima nustatyti width, height, margin (visomis pusėmis) ir padding (visomis pusėmis).

Elementai su display: inline užima būtent tiek vietos, kiek reikia jų turiniui, yra teksto sraute ir išsidėsto horizontaliai. Nustatyti width ir height negalima. Horizontaliai galima nustatyti margin ir padding, vertikaliai tik padding. margin-top ir margin-bottom nėra taikomi.

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

/* Pavyzdys display: inline */
span {
  display: inline;
  /* width ir height nėra taikomi */
  margin: 10px; /* margin-top ir margin-bottom ignoruojami */
  padding: 5px;
  background-color: lightgreen;
}