Όπως αναφέρθηκε στο προηγούμενο κεφάλαιο. ένα στοιχείο σε επίπεδο μπλοκ καταλαμβάνει πάντα το πλήρες διαθέσιμο πλάτος (εκτείνεται αριστερά και δεξιά όσο μπορεί).
Η ρύθμιση του πλάτους ενός στοιχείου σε επίπεδο μπλοκ θα αποτρέψει το τέντωμα του έξω στις άκρες του δοχείου του. Στη συνέχεια, μπορείτε να ορίσετε το περιθώρια στο auto, για να κεντράρει οριζόντια το στοιχείο μέσα στο κοντέινερ του. ο Το στοιχείο θα καταλάβει το καθορισμένο πλάτος και ο υπόλοιπος χώρος θα χωριστεί εξίσου μεταξύ των δύο περιθωρίων:
Σημείωση: Το πρόβλημα με το <div> παραπάνω παρουσιάζεται όταν το παράθυρο του προγράμματος περιήγησης είναι μικρότερο από το πλάτος του το στοιχείο. Στη συνέχεια, το πρόγραμμα περιήγησης προσθέτει μια οριζόντια γραμμή κύλισης στη σελίδα.
Η χρήση του max-width αντί αυτού, σε αυτήν την περίπτωση, θα βελτιώσει την χειρισμός μικρών παραθύρων από το πρόγραμμα περιήγησης. Αυτό είναι σημαντικό όταν ένας ιστότοπος μπορεί να χρησιμοποιηθεί σε μικρές συσκευές:
Συμβουλή: Αλλάξτε το μέγεθος του παραθύρου του προγράμματος περιήγησης σε πλάτος μικρότερο από 500 px, για να δείτε τη διαφορά μεταξύ οι δύο div!
Ακολουθεί ένα παράδειγμα των δύο div παραπάνω:
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}Δοκιμάστε το μόνοι σας →
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>CSS Max-width</h2>
<div class="ex1">This div element has width: 500px;</div>
<br>
<div class="ex2">This div element has max-width: 500px;</div>
<p><strong>Tip:</strong> Drag the browser window to smaller than 500px wide, to see the difference between
the two divs!</p>
</body>
</html>