Σημαίνει ύψος. CSS - Το ύψος του πλαισίου σε σχέση με το πλάτος του. Χαρακτηριστικά υπολογισμού πλάτους και ύψους

ο ύψοςΗ ιδιότητα CSS καθορίζει το ύψος ενός στοιχείου. Από προεπιλογή, η ιδιότητα ορίζει το ύψος της περιοχής περιεχομένου. Ωστόσο, εάν το μέγεθος πλαισίου έχει οριστεί σε πλαίσιο-πλαίσιο, αντ' αυτού καθορίζει το ύψος της περιοχής περιγράμματος.

Η πηγή για αυτό το διαδραστικό παράδειγμα αποθηκεύεται σε ένα αποθετήριο GitHub. Εάν θέλετε να συνεισφέρετε στο έργο διαδραστικών παραδειγμάτων, κλωνοποιήστε τη διεύθυνση https://github.com/mdn/interactive-examples και στείλτε μας ένα αίτημα έλξης.

Οι ιδιότητες min-height και max-height παρακάμπτουν το ύψος.

Σύνταξη

/ * Τιμή λέξης κλειδιού * / ύψος: auto; / * τιμές * / ύψος: 120 px; ύψος: 10 εκ. / * Αξία * / ύψος: 75%; / * Καθολικές τιμές * / ύψος: κληρονομούν; ύψος: αρχικό; ύψος: μη καθορισμένο;

Αξίες

Ο τύπος δεδομένων CSS αντιπροσωπεύει μια τιμή απόστασης. Τα μήκη μπορούν να χρησιμοποιηθούν σε πολλές ιδιότητες CSS, όπως πλάτος, ύψος, περιθώριο, συμπλήρωση, πλάτος περιγράμματος, μέγεθος γραμματοσειράς και σκιά κειμένου. "> Ορίζει το ύψος ως απόλυτη τιμή. Ο τύπος δεδομένων CSS αντιπροσωπεύει μια ποσοστιαία τιμή. Συχνά χρησιμοποιείται για να ορίσει ένα μέγεθος ως προς το γονικό αντικείμενο ενός στοιχείου. Πολλές ιδιότητες μπορούν να χρησιμοποιούν ποσοστά όπως το πλάτος, το ύψος του περιθωρίου και το μέγεθος γραμματοσειράς.> Ορίζει το ύψος ως ποσοστό του ύψους του μπλοκ που περιέχει. Αυτόματο Το πρόγραμμα περιήγησης θα υπολογίσει και θα επιλέξει ένα ύψος για το καθορισμένο στοιχείο. Μέγιστο περιεχόμενο Το εγγενές προτιμώμενο ύψος. Ελάχιστο περιεχόμενο Το εγγενές ελάχιστο ύψος. Προσαρμογή περιεχομένου (δεδομένα CSS Ο τύπος αντιπροσωπεύει μια τιμή που μπορεί να είναι είτε a ή α ."> ) Χρησιμοποιεί τον τύπο fit-content με τον διαθέσιμο χώρο να αντικαθίσταται από το καθορισμένο όρισμα, π.χ. ελάχιστα (μέγιστο περιεχόμενο, μέγιστο (ελάχιστο περιεχόμενο,)).

Τυπική σύνταξη

Ο τύπος δεδομένων CSS αντιπροσωπεύει μια ποσοστιαία τιμή. Συχνά χρησιμοποιείται για να ορίσει ένα μέγεθος ως προς το γονικό αντικείμενο ενός στοιχείου. Πολλές ιδιότητες μπορούν να χρησιμοποιούν ποσοστά όπως το πλάτος, το ύψος του περιθωρίου και το μέγεθος γραμματοσειράς.> Περιεχόμενο-πλαίσιο περιγράμματος διαθέσιμο ελάχ. περιεχόμενο μέγιστο περιεχόμενο προσαρμογής περιεχομένου αυτόματη

Παράδειγμα

Html

Έχω ύψος 50 pixel.

Έχω ύψος 25 pixel.

Είμαι το μισό ύψος του γονιού μου.

CSS

div (πλάτος: 250 εικονοστοιχεία; περιθώριο-κάτω: 5 εικονοστοιχεία; περίγραμμα: 2 εικονοστοιχεία σταθερό μπλε;) #ψηλότερο (ύψος: 50 εικονοστοιχεία;) #κοντύτερη (ύψος: 25 εικονοστοιχεία;) #γονέας (ύψος: 100 εικονοστοιχεία;) #child (ύψος: 50% ; πλάτος: 75%;)

Αποτέλεσμα

Ανησυχίες για την προσβασιμότητα

Βεβαιωθείτε ότι τα στοιχεία που ορίζονται με ύψος δεν περικόπτονται ή/και δεν αποκρύπτουν άλλο περιεχόμενο όταν η σελίδα μεγεθύνεται για να αυξηθεί το μέγεθος του κειμένου.

Προδιαγραφές

Προσδιορισμός	Κατάσταση	Σχόλιο
CSS Intrinsic & Extrinsic Sizing Module Level 4	Προσχέδιο του συντάκτη
CSS Intrinsic & Extrinsic Sizing Module Επίπεδο 3 Ο ορισμός του "ύψους" σε αυτήν την προδιαγραφή.	Προσχέδιο εργασίας	Προστέθηκαν οι λέξεις-κλειδιά max-content, min-content, fit-content.
Μεταβάσεις CSS Ο ορισμός του "ύψους" σε αυτήν την προδιαγραφή.	Προσχέδιο εργασίας	Αναφέρει το ύψος ως κινούμενο.
CSS Επίπεδο 2 (Αναθεώρηση 1) Ο ορισμός του "ύψους" σε αυτήν την προδιαγραφή.	Σύσταση	Προσθέτει υποστήριξη για τον τύπο δεδομένων CSS που αντιπροσωπεύει μια τιμή απόστασης. Τα μήκη μπορούν να χρησιμοποιηθούν σε πολλές ιδιότητες CSS, όπως πλάτος, ύψος, περιθώριο, συμπλήρωση, πλάτος περιγράμματος, μέγεθος γραμματοσειράς και σκιά κειμένου. "> τιμές και ακριβείς σε ποιο στοιχείο εφαρμόζεται.
CSS Επίπεδο 1 Ο ορισμός του "ύψους" σε αυτήν την προδιαγραφή.	Σύσταση	Αρχικός ορισμός.

Αρχική τιμή	αυτο
Εφαρμόζεται σε	όλα τα στοιχεία εκτός από μη αντικατεστημένα ενσωματωμένα στοιχεία, στήλες πίνακα και ομάδες στηλών
Κληρονόμησε	όχι
Ποσοστά	Το ποσοστό υπολογίζεται σε σχέση με το ύψος του μπλοκ που περιέχει το δημιουργημένο πλαίσιο. Εάν το ύψος του μπλοκ που περιέχει δεν προσδιορίζεται ρητά (δηλαδή εξαρτάται από το ύψος του περιεχομένου) και αυτό το στοιχείο δεν είναι απολύτως τοποθετημένο, η τιμή υπολογίζεται Ένα ποσοστό ύψους στο ριζικό στοιχείο είναι σε σχέση με το αρχικό μπλοκ που περιέχει.
Μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ	οπτικός
Υπολογιζόμενη τιμή	ένα ποσοστό ή αυτόματο ή το απόλυτο μήκος
Τύπος κινουμένων σχεδίων	ένας τύπος δεδομένων CSS παρεμβάλλεται ως πραγματικοί αριθμοί κινητής υποδιαστολής.
Κανονική τάξη	η μοναδική μη διφορούμενη σειρά που ορίζεται από την επίσημη γραμματική

Συμβατότητα προγράμματος περιήγησης

Ο πίνακας συμβατότητας σε αυτήν τη σελίδα δημιουργείται από δομημένα δεδομένα. Εάν θέλετε να συνεισφέρετε στα δεδομένα, ρίξτε μια ματιά στη διεύθυνση https://github.com/mdn/browser-compat-data και στείλτε μας ένα αίτημα έλξης.

Ενημερώστε τα δεδομένα συμβατότητας στο GitHub

	Επιφάνεια εργασίας						Κινητό
	Χρώμιο	Ακρη	Firefox	Internet Explorer	ΛΥΡΙΚΗ ΣΚΗΝΗ	Σαφάρι	Προβολή ιστού Android	Chrome για Android	Firefox για Android	Opera για Android	Safari σε iOS	Samsung Internet
ύψος	Πλήρης υποστήριξη Chrome 1	Πλήρης υποστήριξη Edge 12	Πλήρης υποστήριξη Firefox 1	IE Πλήρης υποστήριξη 4	Opera Πλήρης υποστήριξη 7	Πλήρης υποστήριξη Safari 1	WebView Android Πλήρης υποστήριξη 1	Πλήρης υποστήριξη Chrome Android 18	Firefox Android Πλήρης υποστήριξη 4	Opera Android Πλήρης υποστήριξη 10.1	Πλήρης υποστήριξη Safari iOS 1	Samsung Internet Android Πλήρης υποστήριξη 1.0
κατάλληλο περιεχόμενο	Πλήρης υποστήριξη Chrome 46	Edge Χωρίς υποστήριξη Όχι	Firefox Χωρίς υποστήριξη Όχι	IE Χωρίς υποστήριξη Όχι	Opera Πλήρης υποστήριξη 33	Πλήρης υποστήριξη Safari 11 Πλήρης υποστήριξη 11 Πλήρης υποστήριξη 9 Πρόθεμα Πρόθεμα				Opera Android;	Safari iOS Πλήρης υποστήριξη 11 Πλήρης υποστήριξη 11 Πλήρης υποστήριξη 9 Πρόθεμα Πρόθεμα Υλοποιήθηκε με το πρόθεμα προμηθευτή: -webkit-
μέγιστο περιεχόμενο	Πλήρης υποστήριξη Chrome 46	Edge Χωρίς υποστήριξη Όχι	Πρόθεμα Πρόθεμα	IE Χωρίς υποστήριξη Όχι	Opera Πλήρης υποστήριξη 44	Πλήρης υποστήριξη Safari 11	WebView Android Πλήρης υποστήριξη 46	Πλήρης υποστήριξη Chrome Android 46	Πρόθεμα Πρόθεμα Υλοποιήθηκε με το πρόθεμα προμηθευτή: -moz-			Samsung Internet Android Πλήρης υποστήριξη 5.0
ελάχιστο περιεχόμενο	Πλήρης υποστήριξη Chrome 46	Edge Χωρίς υποστήριξη Όχι	Πλήρης υποστήριξη Firefox 66 Πλήρης υποστήριξη 66 Πλήρης υποστήριξη 3 Πρόθεμα Πρόθεμα Υλοποιήθηκε με το πρόθεμα προμηθευτή: -moz-	IE Χωρίς υποστήριξη Όχι	Opera Πλήρης υποστήριξη 44	Πλήρης υποστήριξη Safari 11	WebView Android Πλήρης υποστήριξη 46	Πλήρης υποστήριξη Chrome Android 46	Firefox Android Πλήρης υποστήριξη 66 Πλήρης υποστήριξη 66 Πλήρης υποστήριξη 4 Πρόθεμα Πρόθεμα Υλοποιήθηκε με το πρόθεμα προμηθευτή: -moz-	Opera Android Πλήρης υποστήριξη 43	Safari iOS Πλήρης υποστήριξη 11	Samsung Internet Android Πλήρης υποστήριξη 5.0
τέντωμα	Πλήρης υποστήριξη Chrome 28 Webkit-fill-διαθέσιμο"> Εναλλακτικό όνομα Πλήρης υποστήριξη 28 Webkit-fill-διαθέσιμο"> Εναλλακτικό όνομα Webkit-fill-διαθέσιμο"> Εναλλακτικό όνομα	Edge Χωρίς υποστήριξη Όχι	Firefox Χωρίς υποστήριξη Όχι	IE Χωρίς υποστήριξη Όχι	Opera Πλήρης υποστήριξη 15 Webkit-fill-διαθέσιμο"> Εναλλακτικό όνομα Πλήρης υποστήριξη 15 Webkit-fill-διαθέσιμο"> Εναλλακτικό όνομα Webkit-fill-διαθέσιμο"> Εναλλακτικό όνομα Χρησιμοποιεί το μη τυπικό όνομα: -webkit-fill-available	Πλήρης υποστήριξη Safari 9 Webkit-fill-διαθέσιμο"> Εναλλακτικό όνομα Πλήρης υποστήριξη 9 Webkit-fill-διαθέσιμο"> Εναλλακτικό όνομα Webkit-fill-διαθέσιμο"> Εναλλακτικό όνομα Χρησιμοποιεί το μη τυπικό όνομα: -webkit-fill-available	WebView Android Πλήρης υποστήριξη 4.4 Webkit-fill-διαθέσιμο"> Εναλλακτικό όνομα Πλήρης υποστήριξη 4.4 Webkit-fill-διαθέσιμο"> Εναλλακτικό όνομα Webkit-fill-διαθέσιμο"> Εναλλακτικό όνομα Χρησιμοποιεί το μη τυπικό όνομα: -webkit-fill-available	Πλήρης υποστήριξη Chrome Android 28 Webkit-fill-διαθέσιμο"> Εναλλακτικό όνομα Πλήρης υποστήριξη 28 Webkit-fill-διαθέσιμο"> Εναλλακτικό όνομα Webkit-fill-διαθέσιμο"> Εναλλακτικό όνομα Χρησιμοποιεί το μη τυπικό όνομα: -webkit-fill-available	Firefox Android Χωρίς υποστήριξη Όχι	Opera Android;	Safari iOS Πλήρης υποστήριξη 9 Webkit-fill-διαθέσιμο"> Εναλλακτικό όνομα Πλήρης υποστήριξη 9 Webkit-fill-διαθέσιμο"> Εναλλακτικό όνομα Webkit-fill-διαθέσιμο"> Εναλλακτικό όνομα Χρησιμοποιεί το μη τυπικό όνομα: -webkit-fill-available	Samsung Internet Android Πλήρης υποστήριξη 5.0 Webkit-fill-διαθέσιμο"> Εναλλακτικό όνομα Πλήρης υποστήριξη 5.0 Webkit-fill-διαθέσιμο"> Εναλλακτικό όνομα Webkit-fill-διαθέσιμο"> Εναλλακτικό όνομα Χρησιμοποιεί το μη τυπικό όνομα: -webkit-fill-available

Θρύλος

Πλήρης υποστήριξηΠλήρης υποστήριξη Καμία υποστήριξηΚαμία υποστήριξη Άγνωστη συμβατότηταΆγνωστη συμβατότητα Χρησιμοποιεί ένα μη τυπικό όνομα. Χρησιμοποιεί ένα μη τυπικό όνομα. Απαιτεί ένα πρόθεμα προμηθευτή ή διαφορετικό όνομα για χρήση. Απαιτεί ένα πρόθεμα προμηθευτή ή διαφορετικό όνομα για χρήση.

Οι ιδιότητες πλάτους css είναι υπεύθυνες για την τιμή του πλάτους της περιοχής περιεχομένου του στοιχείου.

Πλάτος: τιμή | τόκος | αυτοκινητο | κληρονομώ

Η ιδιότητα css height είναι υπεύθυνη για την τιμή του ύψους της περιοχής περιεχομένου του στοιχείου.

Ύψος: τιμή | τόκος | αυτοκινητο | κληρονομώ

Δεν επιτρέπονται αρνητικές τιμές για το ύψος και το πλάτος.

Φαίνεται ότι όλα είναι απλά και ξεκάθαρα με αυτές τις ιδιότητες CSS, αλλά, στην πραγματικότητα, όλα αποδεικνύονται ότι δεν είναι τόσο απλά.

Ο ορισμός πλάτους σε ένα στοιχείο σε μια ιστοσελίδα με την ιδιότητα πλάτους 500 pixel δεν σημαίνει ότι το συνολικό πλάτος αυτού του στοιχείου θα είναι 500 pixel ή περισσότερο.

Το πιο σημαντικό πράγμα που πρέπει να καταλάβετε είναι ότι οι ιδιότητες πλάτους και ύψους ορίζουν το πλάτος και το ύψος της περιοχής περιεχομένου.

Οι ιδιότητες πλάτους και ύψους είναι μόνο ένα από τα στοιχεία από τα οποία θα υπολογιστεί το συνολικό πλάτος και ύψος του στοιχείου. Υποδηλώνουν το πλάτος και το ύψος της περιοχής Περιεχομένου, το οποίο φαίνεται στην παρακάτω εικόνα. Επίσης, ιδιότητες όπως η επένδυση, το περιθώριο και το περίγραμμα εμπλέκονται στη διαμόρφωση του συνολικού πλάτους και ύψους.

Αυτό φαίνεται εύκολα τώρα.

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

πλάτος: 100 px

πλάτος: 100 px + padding

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

Εκείνοι. το συνολικό πλάτος του στοιχείου θα αποτελείται από την τιμή της ιδιότητας πλάτους του στοιχείου, συν την τιμή του padding-left και padding-right.

Για διαφορετικούς τύπους στοιχείων που μπορούν να βρεθούν στη σελίδα, το συνολικό πλάτος και ύψος των στοιχείων υπολογίζεται χρησιμοποιώντας ειδικούς τύπους.

Για διαφορετικούς τύπους στοιχείων που μπορεί να βρεθούν σε ιστοσελίδες, οι τιμές πλάτους και ύψους μπορεί να έχουν διαφορετικές συμπεριφορές και τιμές.

Παρόμοια κατάσταση θα είναι και με την ιδιότητα ύψους.

ύψος: 100 px

ύψος: 100 px + padding

Το CSS έχει έναν ειδικό αλγόριθμο που υπολογίζει τις τιμές πλάτους και ύψους για διαφορετικά στοιχεία σε μια ιστοσελίδα. Δεν θα σταθώ σε αυτόν τον αλγόριθμο τώρα, γιατί είναι κάπως περίπλοκο.

Τώρα το κύριο πράγμα που πρέπει να καταλάβουμε είναι ότι οι ιδιότητες πλάτους και ύψους μας επιτρέπουν να εργαστούμε με το πλάτος και το ύψος της περιοχής με το περιεχόμενο του στοιχείου και όχι με το συνολικό πλάτος και ύψος του στοιχείου.

Ύψος και πλάτος στοιχείουείναι υπολογισμένες τιμές. Κάθε στοιχείο μιας ιστοσελίδας σχηματίζει μια ορθογώνια περιοχή, η οποία με τη σειρά της αποτελείται από πολλές περιοχές - περιοχή περιεχομένου (περιεχόμενο), περιοχές επένδυσης, περιοχές πλαισίουκαι χωράφιαστοιχείο.

Μεταξύ του περιεχομένου του στοιχείου και του περιγράμματός του βρίσκονται εσοχήγέμιση, έξω από το περίγραμμα του στοιχείου - χωράφιαπεριθώριο. Κάθε στοιχείο έχει μια περιοχή περιεχομένου, οι άλλες περιοχές είναι προαιρετικές.

Ρύζι. 1. Μπλοκ μοντέλου στοιχείου

1. Ύψος στοιχείου

Η ιδιότητα height ορίζει το ύψος του περιεχομένου του στοιχείου μπλοκ και δεν επηρεάζει την εμφάνιση των ενσωματωμένων στοιχείων: inline; ... Το ύψος των ενσωματωμένων στοιχείων είναι ίσο με το ύψος του περιεχομένου τους. Δεν επιτρέπονται αρνητικές τιμές. Το ακίνητο δεν κληρονομείται.

Σύνταξη

P (ύψος: 100 px;)

2. Πλάτος αντικειμένου

Η ιδιότητα width ορίζει το πλάτος του περιεχομένου του στοιχείου μπλοκ και δεν έχει καμία επίδραση στην εμφάνιση των ενσωματωμένων στοιχείων: inline; ... Τα ενσωματωμένα στοιχεία έχουν το ίδιο πλάτος με το περιεχόμενό τους. Δεν επιτρέπονται αρνητικές τιμές. Το ακίνητο δεν κληρονομείται.

Σύνταξη

P (πλάτος: 100 px;)

3. Ύψος και πλάτος ενός απολύτως τοποθετημένου στοιχείου

Ορίστε το πλάτος και το ύψος μιας απολύτως τοποθετημένης θέσης στοιχείου: απόλυτη; δεν είναι πάντα απαραίτητο, καθώς σε αυτήν την περίπτωση το ύψος και το πλάτος καθορίζονται σιωπηρά από τη μετατόπιση του στοιχείου. Εάν ορίζονται περιθώρια και περιθώρια για ένα στοιχείο, μειώνουν το μέγεθος της περιοχής περιεχομένου κατά τις κατάλληλες τιμές.

Div (φόντο: # 6A7690; θέση: απόλυτη; επάνω: 0; κάτω: 0; αριστερά: 50%; δεξιά: 0;) / * σε αυτήν την περίπτωση, το ύψος του στοιχείου είναι 100%, το πλάτος είναι το 50% του γονικού μπλοκ * /
Ρύζι. 2. Ύψος και πλάτος ενός απολύτως τοποθετημένου στοιχείου

4. Εσοχές στοιχείων

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

Εάν δοθούν τρεις τιμές, για παράδειγμα div (επένδυση: 10px 20px 30px;), τότε θα διανεμηθούν με την ακόλουθη σειρά: η πρώτη τιμή είναι η επάνω επένδυση, η δεύτερη είναι η δεξιά και η αριστερή γέμιση και η τρίτη είναι η κάτω επένδυση.
Εάν δοθούν δύο τιμές, για παράδειγμα, div (επένδυση: 10px 20px;), τότε η πρώτη θα ορίσει την επάνω και την κάτω επένδυση, η δεύτερη θα ορίσει τη δεξιά και την αριστερή.
Μια μεμονωμένη τιμή όπως div (επένδυση: 10 px;) θα ορίσει την ίδια συμπλήρωση σε όλες τις πλευρές του στοιχείου.

Σύνταξη

P (επένδυση: 5px 10px 15px 10px;)

4.1. Εσοχή στη μία πλευρά ενός στοιχείου

Για να ορίσετε το padding μόνο στη μία πλευρά ενός στοιχείου, πρέπει να χρησιμοποιήσετε μία από τις ιδιότητες padding-top, padding-right, padding-bottom, padding-left, για παράδειγμα:

P (επένδυση-αριστερά: 10 px;)

5. Πεδία στοιχείων

Τα περισσότερα από τα στοιχεία χωρίζονται μεταξύ τους με περιθώρια. Η ιδιότητα περιθωρίου είναι μια συντομογραφία για τη σύνταξη των περιθωρίων ενός στοιχείου με την ακόλουθη σειρά: πάνω, δεξιά, κάτω, αριστερά... Χρησιμοποιείται όταν χρειάζεται να καθορίσετε περιθώρια από πολλές πλευρές, αλλά όχι απαραίτητα από τέσσερις πλευρές. Τα κατακόρυφα παρακείμενα περιθώρια των στοιχείων μπλοκ συμπτύσσονται και τα επάνω και κάτω περιθώρια δεν έχουν καμία επίδραση στα ενσωματωμένα στοιχεία. Επιτρέπονται αρνητικές τιμές. Το ακίνητο δεν κληρονομείται.

Εάν δοθούν τρεις τιμές, για παράδειγμα div (περιθώριο: 10px 20px 30px;), τότε θα κατανεμηθούν με την ακόλουθη σειρά: η πρώτη τιμή είναι το πάνω περιθώριο, η δεύτερη είναι το δεξί και αριστερό περιθώριο και η τρίτη είναι το κάτω περιθώριο.
Εάν δοθούν δύο τιμές, για παράδειγμα div (περιθώριο: 10px 20px;), τότε η πρώτη θα ορίσει τα επάνω και κάτω περιθώρια, η δεύτερη θα ορίσει τα δεξιά και τα αριστερά.
Μια μεμονωμένη τιμή όπως div (περιθώριο: 10 px;) θα ορίσει τα ίδια περιθώρια σε όλες τις πλευρές του στοιχείου.

(περιθώριο: 0 αυτόματο;) θα λειτουργήσει μόνο εάν το πλάτος του στοιχείου έχει οριστεί ρητά.

Ρύζι. 3. περιθώριο: auto; για απολύτως τοποθετημένο στοιχείο

Σύνταξη

Div (περιθώριο: 5px 10px 2px 5px;)

5.1. Περιθώρια στη μία πλευρά του στοιχείου

Οι ιδιότητες margin-top, margin-right, margin-bottom, margin-αριστερά ελέγχουν τα αντίστοιχα περιθώρια σε κάθε πλευρά του στοιχείου, για παράδειγμα:

P (περιθώριο-αριστερά: 10 px;)

6. Περιορισμός πλάτους και ύψους

Το CSS υποστηρίζει επίσης μερικές άλλες ιδιότητες που σχετίζονται με τη ρύθμιση του ύψους και του πλάτους των στοιχείων της ιστοσελίδας: ελάχιστο ύψος, ελάχιστο πλάτος, μέγιστο ύψος και μέγιστο πλάτος. Αυτές οι ιδιότητες σάς επιτρέπουν να ορίσετε τις ελάχιστες και μέγιστες τιμές για το πλάτος ή το ύψος ενός στοιχείου, δίνοντας στο στοιχείο τη δυνατότητα να καλύψει τον διαθέσιμο χώρο. Οι ιδιότητες χρησιμοποιούνται συχνά για αποκριτικό σχεδιασμό ιστοσελίδων. Ισχύει για όλα τα στοιχεία εκτός από τα στοιχεία inline και του πίνακα. Ακολουθούν πάντα τον κύριο κανόνα, δηλ. αφού δώσετε στο στοιχείο ύψος ή πλάτος. Δεν κληρονομείται.

Μπορείτε να καθορίσετε κανονικές διαστάσεις χρησιμοποιώντας ορισμένες μονάδες μέτρησης και περιορισμούς μεγέθους χρησιμοποιώντας άλλες μονάδες, για παράδειγμα:

Div (πλάτος: 400 px, μέγιστο πλάτος: 50%;)

Το στοιχείο θα έχει πλάτος 400 εικονοστοιχεία μόνο εάν αυτή η τιμή δεν υπερβαίνει το 50% του πλάτους του μπλοκ κοντέινερ, διαφορετικά το πλάτος του θα μειωθεί.

Τελευταία ενημέρωση: 21.04.2016

Οι διαστάσεις των στοιχείων ορίζονται χρησιμοποιώντας τις ιδιότητες πλάτους και ύψους.

Η προεπιλεγμένη τιμή για αυτές τις ιδιότητες είναι auto, πράγμα που σημαίνει ότι το ίδιο το πρόγραμμα περιήγησης καθορίζει το πλάτος και το ύψος του στοιχείου. Μπορείτε επίσης να ορίσετε ρητά τις διαστάσεις χρησιμοποιώντας μονάδες (pixel, em) ή χρησιμοποιώντας ποσοστά:

Πλάτος: 150 px; πλάτος: 75%; Ύψος: 15 εκ.

Τα εικονοστοιχεία καθορίζουν το ακριβές πλάτος και ύψος. Η μονάδα em εξαρτάται από το ύψος της γραμματοσειράς στο στοιχείο. Εάν το μέγεθος γραμματοσειράς ενός στοιχείου, για παράδειγμα, είναι 16 pixel, τότε 1 em για αυτό το στοιχείο θα ήταν 16 pixel. Δηλαδή, εάν το πλάτος του στοιχείου οριστεί σε 15em, τότε στην πραγματικότητα θα είναι 15 * 16 = 230 pixel. Εάν το στοιχείο δεν έχει καθορισμένο μέγεθος γραμματοσειράς, τότε θα ληφθεί από κληρονομούμενες παραμέτρους ή προεπιλεγμένες τιμές.

Τα ποσοστά για την ιδιότητα πλάτους υπολογίζονται με βάση το πλάτος του στοιχείου κοντέινερ. Εάν, για παράδειγμα, το στοιχείο σώματος σε μια ιστοσελίδα έχει πλάτος 1000 pixel και το ένθετο στοιχείο του είναι

έχει πλάτος 75%, τότε το πραγματικό πλάτος αυτού του μπλοκ είναι

είναι 1000 * 0,75 = 750 pixel. Εάν ο χρήστης αλλάξει το μέγεθος του παραθύρου του προγράμματος περιήγησης, τότε το πλάτος του στοιχείου σώματος και, κατά συνέπεια, το πλάτος του ένθετου μπλοκ div θα αλλάξει επίσης.

Οι ποσοστιαίες τιμές για την ιδιότητα ύψους λειτουργούν παρόμοια με την ιδιότητα πλάτους, με τη διαφορά ότι το ύψος υπολογίζεται πλέον από το ύψος του στοιχείου κοντέινερ.

Για παράδειγμα:

Διαστάσεις σε CSS3

Ωστόσο, οι πραγματικές διαστάσεις του στοιχείου μπορεί να καταλήξουν διαφορετικές από αυτές που ορίζονται στις ιδιότητες πλάτους και ύψους. Για παράδειγμα:

Διαστάσεις σε CSS3

Όπως μπορείτε να δείτε στο στιγμιότυπο οθόνης, στην πραγματικότητα, η τιμή της ιδιότητας πλάτους - 200 εικονοστοιχεία - καθορίζει μόνο το πλάτος του εσωτερικού περιεχομένου του στοιχείου και θα εκχωρηθεί ένας χώρος κάτω από το μπλοκ του ίδιου του στοιχείου, το πλάτος του οποίου ισούται με το πλάτος του εσωτερικού περιεχομένου (ιδιότητα πλάτους) + padding (ιδιότητα padding) + πλάτος περιγράμματος (ιδιότητα πλάτους περιγράμματος) + padding (ιδιότητα περιθωρίου). Δηλαδή, το στοιχείο θα έχει πλάτος 230 pixel και το πλάτος του πλαισίου στοιχείου, λαμβάνοντας υπόψη τα περιθώρια, θα είναι 250 pixel.

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

Χρησιμοποιώντας ένα επιπλέον σύνολο ιδιοτήτων, μπορείτε να ορίσετε τα ελάχιστα και μέγιστα μεγέθη:

ελάχ. πλάτος: ελάχιστο πλάτος

max-width: μέγιστο πλάτος

ελάχ. ύψος: ελάχιστο ύψος

max-height: μέγιστο ύψος

ελάχ. πλάτος: 200 px; πλάτος: 50%; μέγιστο πλάτος: 300 px;

Σε αυτήν την περίπτωση, το πλάτος του στοιχείου είναι 50% του πλάτους του στοιχείου κοντέινερ, αλλά δεν μπορεί να είναι μικρότερο από 200 εικονοστοιχεία ή μεγαλύτερο από 300 εικονοστοιχεία.

Παράκαμψη πλάτους μπλοκ

Η ιδιότητα μεγέθους κουτιού σάς επιτρέπει να παρακάμψετε το μέγεθος των αντικειμένων. Μπορεί να λάβει μία από τις ακόλουθες τιμές:

content-box: η προεπιλεγμένη τιμή ιδιότητας που το πρόγραμμα περιήγησης προσθέτει πλάτος περιγράμματος και συμπλήρωση στις τιμές ιδιοτήτων πλάτους και ύψους για να καθορίσει το πραγματικό πλάτος και ύψος των στοιχείων

padding-box: Λέει στο πρόγραμμα περιήγησης ιστού ότι το πλάτος και το ύψος του στοιχείου πρέπει να περιλαμβάνουν padding ως μέρος της τιμής τους. Για παράδειγμα, ας πούμε ότι έχουμε το ακόλουθο στυλ:

Πλάτος: 200 px; ύψος: 100 px; περιθώριο: 10 px; padding: 10px; περίγραμμα: 5px συμπαγές #ccc; φόντο-χρώμα: #eee; box-sizing: padding-box;

Εδώ το πραγματικό πλάτος του εσωτερικού περιεχομένου του μπλοκ θα είναι 200 εικονοστοιχεία (πλάτος) - 10 εικονοστοιχεία (επένδυση-αριστερά) - 10 εικονοστοιχεία (επένδυση-δεξιά) = 180 εικονοστοιχεία.

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

πλαίσιο-πλαίσιο: Λέει στο πρόγραμμα περιήγησης ιστού ότι το πλάτος και το ύψος του στοιχείου πρέπει να περιλαμβάνουν συμπλήρωση και περίγραμμα ως μέρος της τιμής τους. Για παράδειγμα, ας πούμε ότι έχουμε το ακόλουθο στυλ:

Πλάτος: 200 px; ύψος: 100 px; περιθώριο: 10 px; padding: 10px; περίγραμμα: 5px συμπαγές #ccc; φόντο-χρώμα: #eee; box-sizing: border-box;

Εδώ το πραγματικό πλάτος του εσωτερικού περιεχομένου του μπλοκ θα είναι 200 px (πλάτος) - 10 εικονοστοιχεία (επένδυση-αριστερά) - 10 εικονοστοιχεία (επένδυση-δεξιά) - 5 εικονοστοιχεία (περιθώριο-αριστερό-πλάτος) - 5 εικονοστοιχεία (πλάτος περιγράμματος-δεξιά) = 170 εικονοστοιχεία.

Για παράδειγμα, ας ορίσουμε δύο πλαίσια που διαφέρουν μόνο ως προς την τιμή της ιδιότητας box-sizing:

Διαστάσεις σε CSS3

Προσδιορισμός του πραγματικού μεγέθους στο CSS 3

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