Γέμισμα CSS

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

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

This element has a padding of 70px.

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

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

<h2>CSS Padding</h2>
<div>This element has a padding of 70px.</div>

</body>
</html>

Γέμισμα CSS

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

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

Επένδυση - Ατομικά Πλαϊνά

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

padding-top
padding-right
padding-bottom
padding-left

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

μήκος - καθορίζει μια συμπλήρωση σε px, pt, cm, κ.λπ.
% - καθορίζει μια συμπλήρωση σε % του πλάτους του στοιχείου που περιέχει
inherit - καθορίζει ότι το padding πρέπει να κληρονομηθεί από το γονικό στοιχείο

Σημείωση: Δεν επιτρέπονται αρνητικές τιμές.

Παράδειγμα

Ορίστε διαφορετική συμπλήρωση και για τις τέσσερις πλευρές ενός στοιχείου <div>:

 div {	padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

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

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

<h2>Using individual padding properties</h2>

<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px.</div>

</body>
</html>

Επένδυση - Ακίνητο Συντομογραφίας

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

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

padding-top
padding-right
padding-bottom
padding-left

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

Εάν η ιδιότητα padding έχει τέσσερις τιμές:

padding: 25px 50px 75px 100px;

Η επάνω επένδυση είναι 25 px
Η δεξιά γέμιση είναι 50 px
Η κάτω επένδυση είναι 75 εικονοστοιχεία
Η αριστερή γέμιση είναι 100 px

Παράδειγμα

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

 div {	  padding: 25px 50px 75px 100px;
}

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

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

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

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

</body>
</html>

Εάν η ιδιότητα padding έχει τρεις τιμές:

padding: 25px 50px 75px;

Η επάνω επένδυση είναι 25 px
Το δεξί και το αριστερό padding είναι 50 px
Η κάτω επένδυση είναι 75 εικονοστοιχεία

Παράδειγμα

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

 div {	  padding: 25px 50px 75px;
}

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

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

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

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

</body>
</html>

Εάν η ιδιότητα padding έχει δύο τιμές:

padding: 25px 50px;

Το επάνω και το κάτω padding είναι 25 px
Το δεξί και το αριστερό padding είναι 50 px

Παράδειγμα

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

 div {	  padding: 25px 50px;
}

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

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

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

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

</body>
</html>

Εάν η ιδιότητα padding έχει μία τιμή:

padding: 25px;

και τα τέσσερα padding είναι 25 px

Παράδειγμα

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

 div {	  padding: 25px;
}

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

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

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

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

</body>
</html>

Επένδυση και Πλάτος Στοιχείου

Η ιδιότητα CSS width καθορίζει το πλάτος της περιοχής περιεχομένου του στοιχείου. ο Η περιοχή περιεχομένου είναι το τμήμα μέσα στο padding, το περίγραμμα και το περιθώριο ενός στοιχείου (το μοντέλο του κουτιού).

Έτσι, εάν ένα στοιχείο έχει καθορισμένο πλάτος, η γέμιση που προστίθεται σε αυτό το στοιχείο θα έχει προστίθεται στο συνολικό πλάτος του στοιχείου. Αυτό είναι συχνά ένα ανεπιθύμητο αποτέλεσμα.

Παράδειγμα

Εδώ, το στοιχείο <div> έχει πλάτος 300 px. Ωστόσο, το πραγματικό πλάτος του στοιχείου <div> θα είναι 350 px (300 px + 25 εικονοστοιχεία αριστερής επένδυσης + 25 εικονοστοιχεία δεξιάς επένδυσης):

 div {
  width: 300px;
  padding: 25px;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width: 300px;
  background-color: yellow;
}

div.ex2 {
  width: 300px;
  padding: 25px;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Padding and element width</h2>

<div class="ex1">This div is 300px wide.</div>
<br>

<div class="ex2">The width of this div is 350px, even though it is defined as 300px in the CSS.</div>

</body>
</html>

Για να διατηρήσετε το πλάτος στα 300 εικονοστοιχεία, ανεξάρτητα από το μέγεθος της επένδυσης, μπορείτε να χρησιμοποιήσετε το box-sizing ιδιότητα. Αυτό αναγκάζει το στοιχείο να διατηρήσει το πραγματικό του πλάτος. αν αυξάνετε το padding, ο διαθέσιμος χώρος περιεχομένου θα μειωθεί.

Παράδειγμα

Χρησιμοποιήστε την ιδιότητα μεγέθους κουτιού για να διατηρήσετε το πλάτος στα 300 px, ανεξάρτητα από το ποσότητα επένδυσης:

 div {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
}

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

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width: 300px;
  background-color: yellow;
}

div.ex2 {
  width: 300px;
  padding: 25px;
  box-sizing: border-box;
  background-color: lightblue;
}
</style>
</head>
<body>

<h2>Padding and element width - with box-sizing</h2>

<div class="ex1">This div is 300px wide.</div>
<br>

<div class="ex2">The width of this div remains at 300px, in spite of the 50px of total left and right padding, because of the box-sizing: border-box property.
</div>

</body>
</html>

Περισσότερα Παραδείγματα

Ρυθμίστε την αριστερή επένδυση

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
  padding-left: 2cm;
}
p.padding2 {
  padding-left: 50%;
}
</style>
</head>
<body>

<h1>The padding-left Property</h1>

<p>This is a text with no left padding.</p>
<p class="padding">This text has a left padding of 2 cm.</p>
<p class="padding2">This text has a left padding of 50%.</p>

</body>
</html>

Αυτό το παράδειγμα δείχνει πώς να ορίσετε την αριστερή γέμιση ενός στοιχείου <p>.

Ρυθμίστε τη σωστή επένδυση

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
  padding-right: 2cm;
}

p.padding2 {
  padding-right: 50%;
}
</style>
</head>
<body>

<h1>The padding-right Property</h1>

<p>This is a text with no right padding. This is a text with no right padding. This is a text with no right padding.</p>
<p class="padding">This text has a right padding of 2 cm. This text has a right padding of 2 cm. This text has a right padding of 2 cm.</p>
<p class="padding2">This text has a right padding of 50%. This text has a right padding of 50%. This text has a right padding of 50%.</p>

</body>
</html>

Αυτό το παράδειγμα δείχνει πώς να ορίσετε τη σωστή συμπλήρωση ενός στοιχείου <p>.

Ρυθμίστε την επάνω επένδυση

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
  padding-top: 2cm;
}

p.padding2 {
  padding-top: 50%;
}
</style>
</head>
<body>

<h1>The padding-top Property</h1>

<p>This is a text with no top padding. This is a text with no top padding. This is a text with no top padding.</p>
<p class="padding">This text has a top padding of 2 cm. This text has a top padding of 2 cm. This text has a top padding of 2 cm.</p>
<p class="padding2">This text has a top padding of 50%. This text has a top padding of 50%. This text has a top padding of 50%.</p>

</body>
</html>

Αυτό το παράδειγμα δείχνει πώς να ορίσετε την επάνω συμπλήρωση ενός στοιχείου <p>.

Ρυθμίστε την κάτω επένδυση

<!DOCTYPE html>
<html>
<head>
<style>
p.padding {
  padding-bottom:2cm;
}

p.padding2 {
  padding-bottom:50%;
}
</style>
</head>
<body>

<h1>The padding-bottom Property</h1>

<p>This is a text with no bottom padding. This is a text with no bottom padding. This is a text with no bottom padding.</p>
<p class="padding">This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm. This text has a bottom padding of 2 cm.</p>
<p class="padding2">This text has a bottom padding of 50%. This text has a bottom padding of 50%. This text has a bottom padding of 50%.</p>

</body>
</html>

Αυτό το παράδειγμα δείχνει πώς να ορίσετε το κάτω padding ενός στοιχείου <p>.

Όλες οι ιδιότητες συμπλήρωσης CSS

padding: Μια συντομογραφία ιδιότητας για τον ορισμό όλων των ιδιοτήτων συμπλήρωσης σε μια δήλωση
padding-bottom: Ορίζει την κάτω επένδυση ενός στοιχείου
padding-left: Ορίζει την αριστερή γέμιση ενός στοιχείου
padding-right: Ορίζει τη σωστή συμπλήρωση ενός στοιχείου
padding-top: Ορίζει την επάνω επένδυση ενός στοιχείου