Εργασία με την ιδιότητα display στο CSS

Γνωρίζετε ήδη ότι όλες οι ετικέτες ανήκουν σε ένα συγκεκριμένο μοντέλο μπλοκ. Ωστόσο, εάν το επιθυμείτε, μπορείτε να αλλάξετε το μοντέλο χρησιμοποιώντας την ιδιότητα display. Χρησιμοποιώντας την τιμή block αυτής της ιδιότητας μπορείτε να κάνετε ένα στοιχείο μπλοκ, και χρησιμοποιώντας την τιμή inline - ενσωματωμένο (inline).

Ας κάνουμε τις ετικέτες span να συμπεριφέρονται σαν μπλοκ στοιχεία:

html<span>κείμενο</span>
<span>κείμενο</span>
<span>κείμενο</span>

cssspan {
  display: block;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-bottom: 20px;
}

Результат:

Και τώρα ας κάνουμε τις ετικέτες div να συμπεριφέρονται σαν ενσωματωμένα (inline):

html<div>κείμενο</div>
<div>κείμενο</div>
<div>κείμενο</div>

cssdiv {
  display: inline;
  width: 100px;
  height: 100px;
  border: 1px solid red;
}

Результат: