Ποια είναι η διαφορά μεταξύ της ιδιότητας 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;
}