Περιθώρια
Έστω ότι έχουμε ένα στοιχείο div με id 'child' το οποίο ανήκει μέσα σε ένα άλλο div με id 'parent'. Και στα δύο έχουμε ορίσει περιγράμματα πάχους 5px και χρώματος μπλε και κόκκινου αντίστοιχα.
<body>
<div id="parent">
<div id="child">Περιεχόμενο του child</div>
</div>
</body>
Το CSS είναι:
#parent {
width:300px;
border:solid 5px blue;
}
#child {
border:solid 5px red;
}
Ένα div μέσα ένα άλλο - Και τα δύο έχουν περίγραμμα πάχους 5px
Υπάρχουν δύο περιθώρια που μπορεί να ορίσει ο προγραμματιστής. Το margin που είναι η απόσταση ενός στοιχείου έξω από το περίγραμμά του (ή το χώρο που καταλαμβάνει το στοιχείο αυτό) και το padding που είναι η απόσταση του περιεχόμενου ενός στοιχείου σε σχέση με το περίγραμμα του στοιχείου. Οι ιδιότητες για το καθένα είναι:
|
Ιδιότητα |
Τιμή |
Περιγραφή |
|
margin-left |
Αριθμός σε pixel ή ποσοστό % |
Ορίζει το περιθώριο έξω από την αριστερή πλευρά του στοιχείου |
|
margin-right |
Αριθμός σε pixel ή ποσοστό |
Ορίζει το περιθώριο έξω από τη δεξιά πλευρά του στοιχείου |
|
margin-top |
Αριθμός σε pixel ή ποσοστό |
Ορίζει το περιθώριο έξω από την πάνω πλευρά του στοιχείου |
|
margin-bottom |
Αριθμός σε pixel ή ποσοστό |
Ορίζει το περιθώριο έξω από την κάτω πλευρά του στοιχείου |
|
margin |
Συνδυασμός των παραπάνω |
Συνδυασμός των παραπάνω. Π.χ. margin: 10px = όλες οι πλευρές έχουν περιθώριο 10 pixel margin: 5px 10px = η πάνω και κάτω πλευρά έχουν περιθώριο 5 pixel ενώ η αριστερή και η δεξιά έχουν 10 px margin:2px 3px 5px 10px = η πάνω πλευρά έχει 2 px, η δεξιά 3, η κάτω 5 και η αριστερή 10 |
|
padding-left |
Αριθμός σε pixel ή ποσοστό |
Ορίζει το περιθώριο ανάμεσα στο περιεχόμενο και την αριστερή πλευρά του στοιχείου |
|
padding-right |
Αριθμός σε pixel ή ποσοστό |
Ορίζει το περιθώριο ανάμεσα στο περιεχόμενο και την αριστερή πλευρά του στοιχείου |
|
padding-top |
Αριθμός σε pixel ή ποσοστό |
Ορίζει το περιθώριο ανάμεσα στο περιεχόμενο και την πάνω πλευρά του στοιχείου |
|
padding-bottom |
Αριθμός σε pixel ή ποσοστό |
Ορίζει το περιθώριο ανάμεσα στο περιεχόμενο και την κάτω πλευρά του στοιχείου |
|
padding |
Συνδυασμός των παραπάνω τιμών για padding |
Συνδυασμός των παραπάνω. Π.χ. padding: 10px = όλες οι πλευρές έχουν περιθώριο 10 pixel margin: 5px 10px = η πάνω και κάτω πλευρά έχουν περιθώριο 5 pixel ενώ η αριστερή και η δεξιά έχουν 10 px margin:2px 3px 5px 10px = η πάνω πλευρά έχει 2 px, η δεξιά 3, η κάτω 5 και η αριστερή 10 |
Αλλάζοντας το css για το #child στο παραπάνω παράδειγμα σε
#child {
border:solid 5px red;
margin:10px 5px;
padding-left:20px;
padding-top:30px;
}
έχουμε το παρακάτω αποτέλεσμα.
Χρήση των ιδιοτήτων margin και padding