Εσωτερικό περιθώριο CSS

Το περιθώριο αυτού του στοιχείου είναι 70px.

Εσωτερικό περιθώριο CSS

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

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

Περιθώριο - ανεξάρτητη πλευρά

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

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

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

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

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

Παράδειγμα

Για να θέσουμε διαφορετικό περιθώριο σε όλες τις τέσσερις πλευρές του στοιχείου <div>:

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

Δοκιμάστε το شخصικά

Περιθώριο - σύντομη ιδιότητα

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

padding Η ιδιότητα είναι η σύντομη μορφή των παρακάτω ιδιοτήτων εσωτερικού περιθωρίου:

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

Το πώς λειτουργεί είναι το εξής:

Αν padding Η ιδιότητα έχει τέσσερα ορίσματα:

  • padding: 25px 50px 75px 100px;
    • Το επάνω εσωτερικό περιθώριο είναι 25px
    • Το δεξί εσωτερικό περιθώριο είναι 50px
    • Το κάτω εσωτερικό περιθώριο είναι 75px
    • Το αριστερό εσωτερικό περιθώριο είναι 100px

Παράδειγμα

Χρησιμοποιήστε τη σύντομη ιδιότητα padding με καθορισμένα τέσσερα ορίσματα:

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

Δοκιμάστε το شخصικά

Αν padding Η ιδιότητα καθορίζει τρία ορίσματα:

  • padding: 25px 50px 75px;
    • Το επάνω εσωτερικό περιθώριο είναι 25px
    • Το δεξί και το αριστερό εσωτερικό περιθώριο είναι 50px
    • Το κάτω εσωτερικό περιθώριο είναι 75px

Παράδειγμα

Χρησιμοποιήστε τη σύντομη ιδιότητα padding με καθορισμένα τρία ορίσματα:

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

Δοκιμάστε το شخصικά

Αν padding Η ιδιότητα καθορίζει δύο ορίσματα:

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

Παράδειγμα

Χρησιμοποιήστε τη σύντομη ιδιότητα padding με καθορισμένα δύο ορίσματα:

div {
  padding: 25px 50px;
}

Δοκιμάστε το شخصικά

Αν padding Η ιδιότητα καθορίζει ένα όρισμα:

  • padding: 25px;
    • Όλα τα τέσσερα εσωτερικά περιθώρια είναι 25px

Παράδειγμα

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

div {
  padding: 25px;
}

Δοκιμάστε το شخصικά

Εσωτερικό περιθώριο και πλάτος στοιχείου

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

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

Παράδειγμα

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

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

Δοκιμάστε το شخصικά

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

Παράδειγμα

Χρησιμοποιήστε την ιδιότητα box-sizing για να διατηρήσετε το πλάτος στα 300px, ανεξάρτητα από το περιεχόμενο του γεφυρωτή:

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

Δοκιμάστε το شخصικά

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

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

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

Ιδιότητα Περιγραφή
padding Σύντομη ιδιότητα που χρησιμοποιείται για τη ρύθμιση όλων των ιδιοτήτων εσωτερικού περιθωρίου σε μια μοναδική διαταγή.
padding-bottom Ρροσθέστε το κάτω εσωτερικό περιθώριο του στοιχείου.
padding-left Ρροσθέστε το αριστερό εσωτερικό περιθώριο του στοιχείου.
padding-right Ρύθμιση της δεξιάς εσωτερικής εσοχής του στοιχείου.
padding-top Ρύθμιση της επάνω εσωτερικής εσοχής του στοιχείου.

Εκτεταμένη Ανάγνωση

Εξωτερικά Βιβλία:Μοντέλο Κουτιού: CSS Εσωτερικά Μέρη