Σε αυτό το εκπαιδευτικό μάθημα θα ασχοληθούμε με δύο πράγματα: εξωτερικά περιθώρια και εξωτερικούς ορίζοντες.
Ας ξεκινήσουμε με τα εξωτερικά περιθώρια. Για ένα στοιχείο p που έχει οριστεί άμεσα μέσα στο στοιχείο body, οι πληροφορίες για τα αριστερά και δεξιά περιθώρια του παραθύρου σημαίνουν την απόσταση από τα εξωτερικά όρια του στοιχείου body. Αν ακολουθούν πολλά παράγραφα, οι πληροφορίες για το πάνω και κάτω εξωτερικό περιθώριο σημαίνουν την απόσταση μεταξύ των μεμονωμένων παραγράφων.
Κατά τον καθορισμό των εξωτερικών περιθωρίων και οριζόντων, είναι επιτρεπτές και αρνητικές τιμές, με τις οποίες μπορούν να επιτευχθούν επικαλύψεις.
Καθορίζοντας το εξωτερικό περιθώριο
Το εξωτερικό περιθώριο και η απόσταση είναι ο απραγόρευτος κενός χώρος μεταξύ του τρέχοντος στοιχείου και του γονικού του ή γειτονικού στοιχείου. Χρήσιμες είναι οι παρακάτω ιδιότητες CSS σε στοιχεία HTML που παρήγαγαν μια δική τους παράγραφο ή δημιούργησαν ένα τετράγωνο.
Με το margin εννοείται η συντομογραφία των τεσσάρων ιδιοτήτων margin-top, margin-right, margin-bottom και margin-left. Επιτρεπτές είναι οι παρακάτω τιμές:
• auto – το εξωτερικό περιθώριο υπολογίζεται αυτόματα.
• Ποσοστιαίος καθορισμός – αναφέρεται στο στοιχείο για το οποίο δόθηκε το margin.
• Καθορισμός μήκους – επιτρέπονται και αρνητικές τιμές. Με αυτόν τον τρόπο μπορούν να επικαλυφθούν τα στοιχεία.
Επιτρέπονται έως τέσσερις τιμές:
• μια τιμή – εξωτερικό περιθώριο πάνω, κάτω, αριστερά και δεξιά
• δύο τιμές – πρώτη τιμή για το εξωτερικό περιθώριο πάνω και κάτω, η δεύτερη τιμή για το εξωτερικό περιθώριο δεξιά και αριστερά
• τρεις τιμές – πρώτη τιμή για το εξωτερικό περιθώριο πάνω, η δεύτερη τιμή για το εξωτερικό περιθώριο αριστερά και δεξιά, η τρίτη τιμή για το εξωτερικό περιθώριο κάτω
• τέσσερις τιμές – πρώτη τιμή για το εξωτερικό περιθώριο πάνω, η δεύτερη για τα δεξιά, η τρίτη κάτω και η τέταρτη αριστερά.
Το επόμενο παράδειγμα δείχνει τη χρήση των γενικών ιδιοτήτων margin:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
background-color: yellow;
}
p.ex {
margin: 30px 50px 30px 50px;
background-color:#FF99FF;
</style>
</head>
<body>
<p>Δημιουργία Κάμερας Rig</p>
<p class="ex">Σε αυτή την εκπαίδευση βίντεο μπορείτε να μάθετε πώς να δημιουργήσετε ένα Kamera-Rig και να το κινήσετε με ασφάλεια στον τρισδιάστατο χώρο. Υπάρχει έτοιμο αρχείο έργου μαζί.</p>
</body>
</html>
Σε αυτό το παράδειγμα ορίστηκαν δύο παράγραφοι κειμένου.
Για τον δεύτερο παράγραφο ανατέθηκαν επίσης αποστάσεις.
margin: 30px 50px 30px 50px;
Αυτή η καταχώριση σημαίνει τα ακόλουθα:
• Απόσταση 30 pixels προς τα επάνω
• Απόσταση 50 pixels προς τα δεξιά
• Απόσταση 30 pixels προς τα κάτω
• Απόσταση 50 pixels προς τα αριστερά
Μονόλεπτες οδηγίες για τις αποστάσεις
Προηγουμένως παρουσιάστηκε η γενική καταχώριση margin. Μπορείτε όμως επίσης να κάνετε μονόλεπτες καταχωρίσεις. Με τις ακόλουθες ιδιότητες μπορείτε να καθορίζετε για τις μεμονωμένες πλευρές ενός στοιχείου τις αποστάσεις προς τα επάνω, αριστερά, κάτω ή δεξιά.
• margin-top – εξωτερικό περιθώριο/απόσταση προς τα επάνω
• margin-right – εξωτερικό περιθώριο/απόσταση προς τα δεξιά
• margin-bottom – εξωτερικό περιθώριο/απόσταση προς τα κάτω
• margin-left – εξωτερικό περιθώριο/απόσταση προς τα αριστερά
Για όλες τις τέσσερις ιδιότητες μπορούν να χρησιμοποιηθούν οι εξής τιμές:
• auto – το εξωτερικό περιθώριο υπολογίζεται αυτόματα.
• Ποσοστιαία τιμή – αναφέρεται στο στοιχείο για το οποίο δόθηκε το margin- [επάνω, δεξιά, κάτω, αριστερά]
• Καθορισμός μήκους – επιτρέπονται και αρνητικές τιμές. Με αυτόν τον τρόπο μπορούν να επικαλυφθούν τα στοιχεία.
Το ακόλουθο παράδειγμα δείχνει πώς μπορείτε να χρησιμοποιήσετε αποτελεσματικά τις μονόλεπτες καταχωρίσεις.
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}
p.ex {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}
</style>
</head>
<body>
<p>Δημιουργία Κάμερας Rig</p>
<p class="ex">Σε αυτή την εκπαίδευση βίντεο μπορείτε να μάθετε πώς να δημιουργήσετε ένα Kamera-Rig και να το κινήσετε με ασφάλεια στον τρισδιάστατο χώρο. Υπάρχει έτοιμο αρχείο έργου μαζί.</p>
</body>
</html>
Το αποτέλεσμα στον περιηγητή εμφανίζεται ως εξής:
Καθορίζοντας το εσωτερικό περιθώριο
Με τον όρο εσωτερικό περιθώριο εννοείται ο αναγκαστικός κενός χώρος μεταξύ του περιεχόμενου του στοιχείου και της ίδ
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;}
p.ex {
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
}
</style>
</head>
<body>
<p>Δημιουργία Κάμερας-Rig</p>
<p class="ex">Σε αυτή την εκπαίδευση μέσω βίντεο, θα μάθεις πώς να δημιουργήσεις ένα κάμερα-Rig και πώς να το κινήσεις με ασφάλεια στον τρισδιάστατο χώρο. Υπάρχει ένα αρχείο έργου που παρέχεται.</p>
</body>
</html>Και εδώ είναι το αποτέλεσμα στον περιηγητή:
Με τις τέσσερεις ιδιότητες padding μπορούμε να ορίσουμε τα εσωτερικά περιθώρια. Οι ακόλουθες τέσσερις ιδιότητες CSS είναι διαθέσιμες γι' αυτό:
• padding-top – Απόσταση μεταξύ της επάνω άκρης του περιεχομένου και της επάνω περιθωριακής γραμμής
• padding-bottom – Απόσταση μεταξύ της κάτω άκρης του περιεχομένου και της κάτω περιθωριακής γραμμής
• padding-left – Απόσταση μεταξύ της αριστερής άκρης του περιεχομένου και της αριστερής περιθωριακής γραμμής
• padding-right – Απόσταση μεταξύ της δεξιάς άκρης του περιεχομένου και της δεξιάς περιθωριακής γραμμής.
Για όλες τις τέσσερις ιδιότητες μπορούν να χρησιμοποιηθούν οι ακόλουθες τιμές:
• Ποσοστιαία αναφορά – αναφέρεται στο γονικό στοιχείο
• Αναφορά μήκους
