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

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

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

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

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

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

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

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

Ας υποθέσουμε ότι έχετε πολλές παραγράφους στον κώδικα HTML σας. Κάντε τις να συμπεριφέρονται σαν ενσωματωμένα (inline) στοιχεία.

Ας υποθέσουμε ότι έχετε πολλούς συνδέσμους στον κώδικα HTML σας. Κάντε τους να συμπεριφέρονται σαν μπλοκ στοιχεία. Ορίστε τους περίγραμμα, πλάτος και ύψος.