Ποια είναι η διαφορά μεταξύ block και inline στοιχείων;

Question

IT Interview Practice · Accepted Answer

Κάθε στοιχείο έχει μια προεπιλεγμένη συμπεριφορά **display** που ελέγχει τον τρόπο ροής του στη διάταξη. - **Block** στοιχεία ξεκινάνε σε μια **νέα γραμμή** και καταλαμβάνουν το **πλήρες διαθέσιμο πλάτος**. Δέχονται width/height και όλα τα margins/paddings. Παραδείγματα: `

`, `

`, `
`, `
`. - Inline στοιχεία ρέουν μέσα σε μια γραμμή, μόνο όσο πλάτος έχει το περιεχόμενό τους, και αγνοούν width/height και top/bottom margins. Παραδείγματα: ``, ``, ``, ``. ```html
This is a bold word inside a paragraph.

Block one

Block two
``` ## Ένα πρακτικό προβλήματα ```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 εξηγεί γιατί το `` δεν δέχεται ύψος, γιατί τα `
`s στοιβάζονται, και πότε πρέπει να μεταβείτε σε `inline-block`, `flex`, ή `grid`. Είναι το θεμέλιο του τρόπου διάταξης των στοιχείων πριν εφαρμόσετε οποιοδήποτε σύστημα διάταξης.

Ένα πρακτικό προβλήματα

inline-block — το καλύτερο και των δύο

Γιατί έχει σημασία

Σχετικές ερωτήσεις