CSS-003 — CSS Box Model: Κατανόησε τον χώρο των στοιχείων!

Τι είναι το CSS Box Model;

Στη CSS, κάθε HTML στοιχείο αντιμετωπίζεται σαν ένα ορθογώνιο κουτί (box). Ακόμη κι αν δεν βλέπουμε κάποιο περίγραμμα στην οθόνη, το στοιχείο καταλαμβάνει χώρο στη σελίδα.

Το CSS Box Model περιγράφει πώς υπολογίζεται αυτός ο χώρος. Αποτελείται από τέσσερα βασικά επίπεδα:

• Content: Το περιεχόμενο του στοιχείου.
• Padding: Η εσωτερική απόσταση γύρω από το περιεχόμενο.
• Border: Το περίγραμμα του στοιχείου.
• Margin: Η εξωτερική απόσταση από τα γειτονικά στοιχεία.

1. Content — Το περιεχόμενο

Το Content είναι η περιοχή όπου εμφανίζεται το πραγματικό περιεχόμενο, όπως κείμενο, εικόνες ή άλλα HTML στοιχεία.

.box {
  width: 300px;
  height: 100px;
}

Με τις ιδιότητες width και height ορίζουμε το πλάτος και το ύψος της περιοχής περιεχομένου.

2. Padding — Εσωτερική απόσταση

Το Padding δημιουργεί κενό ανάμεσα στο περιεχόμενο και το περίγραμμα. Μεγαλώνει τον διαθέσιμο εσωτερικό χώρο του κουτιού.

.box {
  padding: 20px;
}

Μπορούμε να ορίσουμε διαφορετική τιμή για κάθε πλευρά:

.box {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
}

Ή να χρησιμοποιήσουμε τη σύντομη μορφή:

.box {
  padding: 10px 20px;
}

Στην παραπάνω περίπτωση έχουμε 10px πάνω και κάτω και 20px δεξιά και αριστερά.

3. Border — Περίγραμμα

Το Border είναι η γραμμή που περιβάλλει το περιεχόμενο και το Padding.

.box {
  border: 3px solid #00bfa5;
}

Η σύνταξη περιλαμβάνει το πάχος, το είδος της γραμμής και το χρώμα. Για παράδειγμα:

• 3px: πάχος περιγράμματος.
• solid: συνεχόμενη γραμμή.
• #00bfa5: χρώμα περιγράμματος.

4. Margin — Εξωτερική απόσταση

Το Margin δημιουργεί απόσταση έξω από το περίγραμμα, ανάμεσα στο συγκεκριμένο στοιχείο και τα γειτονικά του στοιχεία.

.box {
  margin: 20px;
}

Μπορούμε επίσης να χρησιμοποιήσουμε το margin: auto για να κεντράρουμε οριζόντια ένα στοιχείο με καθορισμένο πλάτος:

.box {
  width: 300px;
  margin: 0 auto;
}

5. Πώς λειτουργεί το Box Model;

Η σειρά των επιπέδων, από μέσα προς τα έξω, είναι:

1. Content
2. Padding
3. Border
4. Margin

Ας δούμε ένα παράδειγμα. Έστω ότι έχουμε ένα στοιχείο με:

• Width: 300px
• Padding: 20px σε κάθε πλευρά
• Border: 3px σε κάθε πλευρά
• Margin: 10px σε κάθε πλευρά

Το συνολικό οριζόντιο μέγεθος που καταλαμβάνει είναι:

300 + 20 + 20 + 3 + 3 + 10 + 10 = 366px

Δηλαδή, το στοιχείο έχει συνολικό πλάτος 366px, αν χρησιμοποιούμε την προεπιλεγμένη συμπεριφορά box-sizing: content-box.

6. Η ιδιότητα box-sizing

Η CSS διαθέτει την ιδιότητα box-sizing, η οποία καθορίζει πώς υπολογίζονται οι διαστάσεις ενός στοιχείου.

Η προεπιλεγμένη τιμή είναι:

box-sizing: content-box;

Με την τιμή content-box, τα width και height αφορούν μόνο το περιεχόμενο. Το Padding και το Border προστίθενται στις διαστάσεις.

Υπάρχει όμως και η τιμή border-box:

.box {
  width: 300px;
  box-sizing: border-box;
}

Με το border-box, το Padding και το Border συμπεριλαμβάνονται στο καθορισμένο πλάτος και ύψος. Έτσι, το συνολικό πλάτος παραμένει 300px.

Μια πολύ συνηθισμένη πρακτική είναι:

* {
  box-sizing: border-box;
}

Με αυτόν τον τρόπο εφαρμόζουμε το border-box σε όλα τα στοιχεία της σελίδας.

7. Συνηθισμένα λάθη

• Μπερδεύουμε το Padding με το Margin.
• Ξεχνάμε ότι το Border προσθέτει διαστάσεις όταν χρησιμοποιούμε το content-box.
• Περιμένουμε το margin: auto να κεντράρει ένα στοιχείο χωρίς να έχει καθορισμένο πλάτος.
• Δεν λαμβάνουμε υπόψη το box-sizing όταν υπολογίζουμε διαστάσεις.

8. Ασκήσεις

1. Άλλαξε το Padding του παραδείγματος και παρατήρησε πώς μεγαλώνει ο εσωτερικός χώρος.
2. Άλλαξε το χρώμα και το πάχος του Border.
3. Αύξησε το Margin και παρατήρησε την απόσταση από τα υπόλοιπα στοιχεία.
4. Δοκίμασε να αλλάξεις το box-sizing από content-box σε border-box.

Συμπέρασμα

Το CSS Box Model είναι ένα από τα σημαντικότερα θεμέλια της CSS. Όταν κατανοήσουμε τη διαφορά ανάμεσα σε Content, Padding, Border και Margin, μπορούμε να ελέγχουμε πολύ καλύτερα τις αποστάσεις, τις διαστάσεις και τη διάταξη των στοιχείων μιας ιστοσελίδας.

Στο επόμενο μάθημα θα συνεχίσουμε με περισσότερες τεχνικές διάταξης και εμφάνισης στοιχείων!