Mis vahe on omadustel display: block ja display: inline?

Elementid, millel on display: block, hõivavad kogu saadaval oleva laiuse, alustavad uuel real ja paigutuvad vertikaalselt. Võimalik on määrata width, height, margin (kõik küljed) ja padding (kõik küljed).

Elementid, millel on display: inline, hõivavad täpselt nii palju ruumi, kui nende sisu vajab, asuvad teksti voos ja paigutuvad horisontaalselt. Ei ole võimalik määrata width ja height. Horisontaalselt saab määrata margin ja padding, vertikaalselt ainult padding. margin-top ja margin-bottom ei rakendu.

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

/* Näide display: inline */
span {
  display: inline;
  /* width ja height ei rakendu */
  margin: 10px; /* margin-top ja margin-bottom ignoreeritakse */
  padding: 5px;
  background-color: lightgreen;
}