Στο σημείο αυτό υπενθυμίζω τι είναι στοιχείο μιας ιστοσελίδας.:
Στοιχείο είναι ένα οποιοδήποτε μέρος της HTML σελίδας, όπως: μια εικόνα, μια παράγραφος, μια λίστα, μια επιλογή μιας λίστας, μια επικεφαλίδα, ένα κείμενο ή μια λέξη που βρίσκεται μέσα σε ετικέτες διαμόρφωσης κτλ.

Κάθε στοιχείο λοιπόν, έχει 3 ιδιότητες που αφορούν την σχέση τους με τα υπόλοιπα γειτονικά στοιχεία, αλλά και την εμφάνιση τους:
  • ο κενός χώρος μεταξύ του πλαισίου και των γειτονικών στοιχείων (margin)
  • το πλαίσιο (border)
  • ο κενός χώρος μεταξύ του περιεχομένου του στοιχείου και του πλαισίου του (padding)

Η w3.org, η οποία ανέπτυξε και διαχειρίζεται τα πρότυπα της CSS και της HTML, ομαδοποίησε αυτές τις ιδιότητες χρησιμοποιώντας τον ορισμό Box model, ο οποίος απεικονίζεται παρακάτω:

  • Το margin (η περιοχή με άσπρο, ή αν θέλετε διαφανές, χρώμα) καθορίζει την περιοχή έξω από το πλαίσιο (border) του στοιχείου. Ο χώρος αυτός δεν έχει χρώμα, καθώς είναι πάντα transparent (διαφανές)
  • Το border (η περιοχή με κόκκινο χρώμα) ορίζει το πάχος και το χρώμα του πλαισίου γύρω απο το στοιχείο
  • Το padding ((η περιοχή με πορτοκαλί χρώμα)) ορίζει την περιοχή μεταξύ του πλαισίου (border) και του περιεχομένου του στοιχείου. Η περιοχή αυτή μπορεί να έχει background ένα χρώμα ή μια εικόνα
  • Το περιεχόμενο (η περιοχή με κίτρινο χρώμα) είναι το κείμενο ή η εικόνα

Width και height ενός στοιχείου

Είναι σημαντικό να κατανοήσουμε ότι όταν ορίζουμε τις διαστάσεις ενός στοιχείου με css, στην ουσία ορίζουμε τις διαστάσεις της περιοχής του περιεχομένου, χωρίς να υπολογίζονται οι περιοχές των padding, margin και border. Για παράδειγμα στο παρακάτω στυλ ορίζουμε το μήκος, το ύψος και το πλαίσιο ενός div, καθώς και τις τιμές padding και margin του div (μην ανησυχείτε αν δεν καταλάβετε κάποια από τις ιδιότητες του παρακάτω στυλ, καθώς θα τις δούμε αναλυτικά σε επόμενες ενότητες):
Width και height
div.example {
width: 340px;
height: 55px;
border: 5px solid yellow;
padding: 15px;
margin: 20px;
}
Παίξτε με τις τιμές των ιδιοτήτων του στυλ και δείτε το αποτέλεσμα

Το πραγματικό μήκος του στοιχείου είναι:
width = 340px +
5px (αριστερό πλαίσιο) +
5px (δεξί πλαίσιο) +
15px (αριστερό padding) +
15px (δεξί padding) +
20px (αριστερό margin) +
20px (δεξί margin) = 420px

Ενώ το πραγματικό ύψος του ίδιου στοιχείου είναι:
height = 55px +
5px (πάνω πλαίσιο) +
5px (κάτω πλαίσιο) +
15px (πάνω padding) +
15px (κάτω padding) +
20px (πάνω margin) +
20px (κάτω margin) = 135px

Γενικά, για να υπολογίσουμε το πραγματικό μήκος (width) ενός στοιχείου χρησιμοποιούμε τον παρακάτω τύπο:
width = width + αριστερό padding + δεξί padding + αριστερό border + δεξί border + αριστερό margin + δεξί margin

ενώ για να υπολογίσουμε το πραγματικό ύψος (height) ενός στοιχείου χρησιμοποιούμε τον παρακάτω τύπο:
height = height + πάνω padding + κάτω padding + πάνω border + κάτω border + πάνω margin + κάτω margin

Σε επόμενη ενότητα θα δούμε πως ορίζουμε διαφορετικά μεγέθη για τις τέσσερεις πλευρές των ιδιοτήτων (δηλαδή, padding-left, padding-bottom, border-right, margin-top κτλ.)

Συμπεριφορά του IE8 και παλαιότερων εκδόσεων του Internet Explorer

Το παραπάνω παράδειγμα δεν δουλεύει σωστά στον Internet Explorer 8 και σε παλαιότερες εκδόσεις του ίδιου browser. Για να αποφύγετε το πρόβλημα ασυμβατότητας θα πρέπει να προσθέσετε στην κορυφή του html αρχείου σας την ετικέτα doctype όπως φαίνεται στο παράδειγμα:

Σωστός τρόπος στον IE8
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style type="text/css">
div.ex
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>

Παραδείγματα

Γειτνίαση δύο παραγράφων
Σε αυτό το παράδειγμα θα δούμε πως η τιμή padding επηρεάζει την απόσταση μεταξύ δύο παραγράφων. Προσπαθήστε να παίξετε με την τιμή του padding, αλλά και να προσθέσετε την ιδιότητα margin στο στυλ.
Pin It

Ο ιστότοπος wlearn.gr χρησιμοποιεί cookies για την αποτελεσματικότερη λειτουργία του. Συνεχίζοντας την περιήγησή σας στο wlearn.gr συμφωνείτε με την χρήση των cookies.