Περιθώριο CSS

Πίνακας περιεχομένων

    Εμφάνιση πίνακα περιεχομένων

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

This element has a margin of 70px.

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  margin: 70px;
  border: 1px solid #4CAF50;
}
</style>
</head>
<body>

<h2>CSS Margins</h2>

<div>This element has a margin of 70px.</div>

</body>
</html>

Περιθώρια CSS

Οι ιδιότητες CSS περιθώριο χρησιμοποιούνται για τη δημιουργία χώρου γύρω από στοιχεία, εκτός οποιωνδήποτε καθορισμένων συνόρων.

Με το CSS, έχετε τον πλήρη έλεγχο των περιθωρίων. Υπάρχουν ακίνητα για τον ορισμό του περιθωρίου για κάθε πλευρά ενός στοιχείου (πάνω, δεξιά, κάτω και αριστερά).

Περιθώριο - Ατομικές Πλευρές

Το CSS έχει ιδιότητες για τον καθορισμό του περιθωρίου για το καθένα πλευρά ενός στοιχείου:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Όλες οι ιδιότητες περιθωρίου μπορούν να έχουν τις ακόλουθες τιμές:

  • auto - το πρόγραμμα περιήγησης υπολογίζει το περιθώριο

  • μήκος - καθορίζει ένα περιθώριο σε px, pt, cm, κ.λπ.

  • % - καθορίζει ένα περιθώριο σε % του πλάτους του στοιχείου που περιέχει

  • inherit - καθορίζει ότι το περιθώριο θα πρέπει να κληρονομηθεί από το γονικό στοιχείο

Συμβουλή: Επιτρέπονται οι αρνητικές τιμές.

Παράδειγμα

Ορίστε διαφορετικά περιθώρια και για τις τέσσερις πλευρές ενός στοιχείου <p>:

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Using individual margin properties</h2>

<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px.</div>

</body>
</html>

Περιθώριο - Συντομογραφία

Για να συντομεύσετε τον κώδικα, μπορείτε να καθορίσετε όλες τις ιδιότητες περιθωρίου ένα ακίνητο.

Η ιδιότητα περιθώριο είναι μια συντομογραφία για τις ακόλουθες μεμονωμένες ιδιότητες περιθωρίου:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Λοιπόν, ορίστε πώς λειτουργεί:

Εάν η ιδιότητα περιθώριο έχει τέσσερις τιμές:

margin: 25px 50px 75px 100px;

  • Το επάνω περιθώριο είναι 25 εικονοστοιχεία

  • Το δεξί περιθώριο είναι 50 εικονοστοιχεία

  • το κάτω περιθώριο είναι 75 εικονοστοιχεία

  • Το αριστερό περιθώριο είναι 100 px

Παράδειγμα

Χρησιμοποιήστε την ιδιότητα σύντομο περιθώριο με τέσσερις τιμές:

p {
  margin: 25px 50px 75px 100px;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px 75px 100px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 4 values</h2>

<div>This div element has a top margin of 25px, a right margin of 50px, a bottom margin of 75px, and a left margin of 100px.</div>

<hr>

</body>
</html>

Εάν η ιδιότητα περιθώριο έχει τρεις τιμές:

margin: 25px 50px 75px;

  • Το επάνω περιθώριο είναι 25 εικονοστοιχεία

  • τα δεξιά και τα αριστερά περιθώρια είναι 50 px

  • το κάτω περιθώριο είναι 75 εικονοστοιχεία

Παράδειγμα

Χρησιμοποιήστε την ιδιότητα σύντομο περιθώριο με τρεις τιμές:

p {	margin: 25px 50px 75px;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px 75px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 3 values</h2>

<div>This div element has a top margin of 25px, a right and left margin of 50px, and a bottom margin of 75px.</div>

<hr>

</body>
</html>

Εάν η ιδιότητα περιθώριο έχει δύο τιμές:

margin: 25px 50px;

  • Τα επάνω και κάτω περιθώρια είναι 25 px

  • τα δεξιά και τα αριστερά περιθώρια είναι 50 px

Παράδειγμα

Χρησιμοποιήστε την ιδιότητα σύντομο περιθώριο με δύο τιμές:

p {	margin: 25px 50px;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px 50px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 2 values</h2>

<div>This div element has a top and bottom margin of 25px, and a right and left margin of 50px.</div>

<hr>

</body>
</html>

Εάν η ιδιότητα περιθώριο έχει μία τιμή:

margin: 25px;

  • και τα τέσσερα περιθώρια είναι 25 εικονοστοιχεία

Παράδειγμα

Χρησιμοποιήστε την ιδιότητα συντομογραφίας περιθωρίου με μία τιμή:

p {
  margin: 25px;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid black;
  margin: 25px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>The margin shorthand property - 1 value</h2>

<div>This div element has a top, bottom, left, and right margin of 25px.</div>

<hr>

</body>
</html>

Η αυτόματη τιμή

Μπορείτε να ορίσετε την ιδιότητα περιθωρίου σε αυτόματο για να κεντράρετε οριζόντια το στοιχείο εντός του κοντέινερ του.

Στη συνέχεια, το στοιχείο θα καταλάβει το καθορισμένο πλάτος και τον υπόλοιπο χώρο θα χωριστεί εξίσου μεταξύ του αριστερού και του δεξιού περιθωρίου.

Παράδειγμα

Χρήση περιθωρίου: αυτόματο:

div {
  width: 300px;
  margin: 
auto;
  border: 1px solid red;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  margin: auto;
  border: 1px solid red;
}
</style>
</head>
<body>

<h2>Use of margin: auto</h2>
<p>You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:</p>

<div>
This div will be horizontally centered because it has margin: auto;
</div>

</body>
</html>

Η κληρονομική αξία

Αυτό το παράδειγμα επιτρέπει στο αριστερό περιθώριο του στοιχείου

να κληρονομηθεί από το γονικό στοιχείο (<div>):

Παράδειγμα

Χρήση της τιμής κληρονομικότητας:

div {
  border: 1px solid red;
  margin-left: 100px;
}
p.ex1 {
    margin-left: 
inherit;
}

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 1px solid red;
  margin-left: 100px;
}

p.ex1 {
  margin-left: inherit;
}
</style>
</head>
<body>

<h2>Use of the inherit value</h2>
<p>Let the left margin be inherited from the parent element:</p>

<div>
<p class="ex1">This paragraph has an inherited left margin (from the div element).</p>
</div>

</body>
</html>

Όλες οι ιδιότητες περιθωρίου CSS

margin

Μια συντομογραφία για τον ορισμό όλων των ιδιοτήτων περιθωρίου σε μία δήλωση

margin-bottom

Ορίζει το κάτω περιθώριο ενός στοιχείου

margin-left

Ορίζει το αριστερό περιθώριο ενός στοιχείου

margin-right

Ορίζει το δεξί περιθώριο ενός στοιχείου

margin-top

Ορίζει το επάνω περιθώριο ενός στοιχείου