Κάθε στοιχείο έχει μια προεπιλεγμένη συμπεριφορά display που ελέγχει τον τρόπο ροής του στη διάταξη.
- Block στοιχεία ξεκινάνε σε μια νέα γραμμή και καταλαμβάνουν το πλήρες διαθέσιμο πλάτος. Δέχονται width/height και όλα τα margins/paddings. Παραδείγματα:
<div>,<p>,<h1>,<section>,<ul>. - Inline στοιχεία ρέουν μέσα σε μια γραμμή, μόνο όσο πλάτος έχει το περιεχόμενό τους, και αγνοούν width/height και top/bottom margins. Παραδείγματα:
<span>,<a>,<strong>,<em>.
html
<p>This is a <strong>bold</strong> word inside a paragraph.</p>
<!-- <strong> stays inline; the two <div>s below stack vertically -->
<div>Block one</div>
<div>Block two</div>
Ένα πρακτικό προβλήματα
css
span { width: 200px; height: 50px; } /* ❌ ignored — span is inline */
Η ρύθμιση width/height σε ένα inline στοιχείο δεν κάνει τίποτα. Η λύση είναι να αλλάξετε το display:
css
span { display: inline-block; width: 200px; } /* ✅ flows inline BUT respects size */
inline-block — το καλύτερο και των δύο
inline-block βρίσκεται στη ροή του κειμένου (δίπλα-δίπλα) και σέβεται width/height/margins — ιδανικό για nav items, badges, ή κουμπιά διατεταγμένα σε σειρά.
text
block → new line, full width, sizeable
inline → in-line, content width, NOT sizeable (vertically)
inline-block → in-line, content flow, sizeable
Γιατί έχει σημασία
Η κατανόηση της προεπιλεγμένης συμπεριφοράς display εξηγεί γιατί το <span> δεν δέχεται ύψος, γιατί τα <div>s στοιβάζονται, και πότε πρέπει να μεταβείτε σε inline-block, flex, ή grid.
Είναι το θεμέλιο του τρόπου διάταξης των στοιχείων πριν εφαρμόσετε οποιοδήποτε σύστημα διάταξης.