Εισαγωγή στα CSS μέρος 5
Σε αυτό το πέμπτο μέρος της εισαγωγής στα CSS θα δούμε όλες τις ιδιότητες και επιλόγές για τα περιθώρια που μπορούμε να χρησιμοποιήσουμε με τα CSS και επίσης τις ιδιότητες για το padding.
Ιδιότητες Περιθωρίου του CSS
Οι ιδιότητες περιθωρίου (margin properties) του CSS ορίζουν το διάστημα γύρω από τα στοιχεία. Μπορούμε να χρησιμοποιήσουμε αρνητικές τιμές για να επικαλύψουμε (overlap) το περιεχόμενο. Το πάνω, δεξιά, κάτω και αριστερό περιθώριο μπορούν να αλλάξουν ανεξάρτητα χρησιμοποιώντας ξεχωριστές ιδιότητες. Μπορούμε να χρησιμοποιήσουμε την ιδιότητα margin για να αλλάξουμε όλα τα περιθώρια μονομιάς.
Ορισμός του Αριστερού Περιθωρίου Κειμένου
<html>
<head>
<style>
p.margin {margin-left: 2cm}
</style>
</head>
<body>
<p>
This is a paragraph This is a paragraph
This is a paragraph This is a paragraph
</p>
<p class="margin">
This is a paragraph with a left margin
This is a paragraph with a left margin
</p>
</body>
</html>
Ορισμός του Δεξιού Περιθωρίου Κειμένου
<html>
<head>
<style>
p.margin {margin-right: 5cm}
</style>
</head>
<body>
<p>
This is a paragraph This is a paragraph
This is a paragraph This is a paragraph
</p>
<p class="margin">
This is a paragraph with a right margin
This is a paragraph with a right margin
</p>
</body>
</html>
Ορισμός του Πάνω Περιθωρίου Κειμένου
<html>
<head>
<style>
p.margin {margin-top: 5cm}
</style>
</head>
<body>
<p>
This is a paragraph This is a paragraph
This is a paragraph This is a paragraph
</p>
<p class="margin">
This is a paragraph with a top margin
This is a paragraph with a top margin
</p>
</body>
</html>
Ορισμός του Κάτω Περιθωρίου Κειμένου
<html>
<head>
<style>
p.margin {margin-bottom: 80px}
</style>
</head>
<body>
<p>
This is a paragraph This is a paragraph
This is a paragraph This is a paragraph
</p>
<p class="margin">
This is a paragraph with a bottom margin
This is a paragraph with a bottom margin
</p>
<p>
This is a paragraph This is a paragraph
This is a paragraph This is a paragraph
</p>
</body>
</html>
Όλες οι Ιδιότητες Περιθωρίου σε μια Δήλωση
<html>
<head>
<style>
p.margin {margin: 2cm 4cm 3cm 4cm}
</style>
</head>
<body>
<p> This is a paragraph </p>
<p class="margin"> This is a paragraph with margins </p>
<p> This is a paragraph </p>
</body>
</html>
Το Padding του CSS
Οι ιδιότητες padding (παραγεμίσματος) ορίζουν το διάστημα ανάμεσα στο περίγραμμα ενός στοιχείου και στο περιεχόμενό του. Αρνητικές τιμές δεν επιτρέπονται. Τα πάνω, δεξιά, κάτω και αριστερά padding μπορούν να αλλάξουν ανεξάρτητα χρησιμοποιώντας ξεχωριστές ιδιότητες.
Ορισμός του Αριστερού Padding ενός Κελιού Πίνακα
<html>
<head>
<style>
td {padding-left: 2cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td> This is a tablecell with a left padding </td>
</tr>
</table>
</body>
</html>
Ορισμός του Δεξιού Padding ενός Κελιού Πίνακα
<html>
<head>
<style>
td {padding-right: 5cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td> This is a tablecell with a right padding.
<p><b> Note: </b> Netscape 4 does not support the "padding-right" property. </p> </td>
</tr>
</table>
</body>
</html>
Ορισμός του Πάνω Padding ενός Κελιού Πίνακα
<html>
<head>
<style>
td {padding-top: 2cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td> This is a tablecell with a top padding </td>
</tr>
</table>
</body>
</html>
Ορισμός του Κάτω Padding ενός Κελιού Πίνακα
<html>
<head>
<style>
td {padding-bottom: 2cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td> This is a tablecell with a bottom padding </td>
</tr>
</table>
</body>
</html>
Όλες οι Ιδιότητες Padding σε μια Δήλωση
<html>
<head>
<style>
td {padding: 1.5cm}
td.twovalues {padding: 0.5cm 2.5cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td> This is a tablecell with padding on each side </td>
</tr>
</table>
<br>
<table border="1">
<tr>
<td class="twovalues"> This is a tablecell with padding on each side. The top and bottom padding have the same
value (0.5cm), while the left and right padding have another value (2.5) </td>
</tr>
</table>
</body>
</html>
