5.1 Η ιδιότητα display: inline-block στην CSS

Η τιμή display: inline-block στην CSS διαφέρει από την τιμή display: inline καθώς επιτρέπει τον ορισμό πλάτους και ύψους στο στοιχείο.

Επίσης, με την display: inline-block, τα περιθώρια στην κορυφή και στο κάτω μέρος του στοιχείου σεβάσται, αλλά με την display: inline δεν σεβάσται.

Σε σύγκριση με την display: block, η μεγαλύτερη διαφορά είναι ότι η display: inline-block δεν προσθέτει αλλαγή γραμμής μετά το στοιχείο, έτσι το στοιχείο μπορεί να τοποθετηθεί δίπλα σε άλλα στοιχεία.

Το παρακάτω παράδειγμα δείχνει τη διαφορετική συμπεριφορά των τιμών display: inline, display: inline-block και display: block:

HTML:

<div class="container">
  <div class="inline">Inline</div>
  <div class="inline-block">Inline Block</div>
  <div class="block">Block</div>
</div>

CSS:

.container {
  background-color: lightgray;
  padding: 10px;
}

.inline {
  display: inline;
  background-color: yellow;
  margin: 5px;
  padding: 5px;
}

.inline-block {
  display: inline-block;
  background-color: orange;
  margin: 5px;
  padding: 5px;
}

.block {
  display: block;
  background-color: green;
  margin: 5px;
  padding: 5px;
}

Στο παραπάνω παράδειγμα, χρησιμοποιούμε έναν περιέκτη .container για να περικλείσουμε τα στοιχεία. Ορίζουμε τα στοιχεία .inline, .inline-block και .block με διαφορετικές τιμές display.

[adinserter block=”2″]

Το .inline έχει display: inline; και εμφανίζεται ως ενσωματωμένο στοιχείο. Έχει κίτρινο φόντο και ένα ανθυγιεινό περιθώριο και περικλείει μόνο το κείμενο του.

Το .inline-block έχει display: inline-block; και εμφανίζεται ως ενσωματωμένο στοιχείο που δέχεται πλάτος και ύψος. Έχει πορτοκαλί φόντο και ένα ανθυγιεινό περιθώριο και περικλείει τόσο το κείμενο όσο και το περιεχόμενό του.

Το .block έχει display: block; και εμφανίζεται ως μπλοκ στοιχείο που καταλαμβάνει ολόκληρο το πλάτος της γραμμής. Έχει πράσινο φόντο και ένα ανθυγιεινό περιθώριο και περικλείει τόσο το κείμενο όσο και το περιεχόμενό του.

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

Ένα συνηθές παράδειγμα χρήσης της ιδιότητας display: inline-block είναι η εμφάνιση των στοιχείων λίστας οριζόντια αντί για κατακόρυφα. Το παρακάτω παράδειγμα δημιουργεί οριζόντιες συνδέσεις πλοήγησης:

HTML:

<ul class="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul>

CSS:

.nav {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav li {
  display: inline-block;
}

.nav li a {
  display: block;
  padding: 10px;
  background-color: gray;
  color: white;
  text-decoration: none;
}

.nav li a:hover {
  background-color: darkgray;
}

Στο παραπάνω παράδειγμα, χρησιμοποιούμε έναν περιέκτη <ul> με την κλάση .nav για να περικλείσουμε τις συνδέσεις πλοήγησης. Χρησιμοποιούμε επίσης την ιδιότητα list-style: none; για να απενεργοποιήσουμε την προεπιλεγμένη στυλοθεσία της λίστας.

Ορίζουμε τα στοιχεία <li> με την ιδιότητα display: inline-block; για να τα εμφανίσουμε οριζόντια. Τα στοιχεία <a> μέσα σε κάθε <li> έχουν την ιδιότητα display: block; για να καταλάβουν ολόκληρο το πλάτος του <li> και να εμφανίζονται ως μπλοκ στοιχεία.

Εφαρμόζουμε στυλ στα στοιχεία <a> όπως περιθώρια, χρώματα φόντου και κειμένου, και διακοσμητική κάτω γραμμή όταν ο χρήστης τοποθετεί το ποντίκι πάνω από μια σύνδεση. Έτσι δημιουργούμε μια οριζόντια γραμμή πλοήγησης με στυλ.