Layout: inline-block

Uvod
Objasni da ponekad želimo da elementi stoje jedan pored drugog (horizontalno), ali da ipak žele da imamo kontrolu nad njihovom širinom, visinom, marginama/padding-om. Tu dolazi na scenu vrednost display: inline-block u CSS-u.

Šta je inline-block — razlika između block, inline i inline-block

Elementi sa display: block zauzimaju celu širinu roditelja i svaki počinje u novom redu.
“Inline” elementi zauzimaju samo prostor koji im je potreban i ne kreiraju prekid linije, ali im ne možemo pouzdano definisati širinu/visinu ili vertikalne margine/paddinge.
inline-block je “sredina”: element se ponaša kao inline kod toga da stoji “u redu” sa drugim elementima, ali ima karakteristike block-elementa — možemo mu zadati širinu, visinu, marginu, padding, border…

Kada i zašto koristiti inline-block

Kada želiš da više “kutija” stoji horizontalno jedna pored druge — na primer navigacija, galerija slika, set kartica/ponuda, dugmića…
Kada želiš da element ima definisanu širinu/visinu, margine/padding, ali i da se ponaša “u liniji” sa ostalim sadržajem.

Primer upotrebe inline-block — HTML + CSS kod

<!DOCTYPE html>
<html lang="sr">
<head>
  <meta charset="UTF-8">
  <title>Primer inline-block layouta</title>
  <style>
    .box {
      display: inline-block;
      width: 150px;
      height: 100px;
      margin: 10px;
      padding: 10px;
      background-color: #f0f0f0;
      border: 1px solid #333;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="box">Blok 1</div>
  <div class="box">Blok 2</div>
  <div class="box">Blok 3</div>
</body>
</html>

U ovom primeru — 3 „kutije” stoje “u redu”, zauzimaju definisanu širinu i visinu, imaju razmake i border.

Analiza primera

.box { display: inline-block; } — ovo omogućava da elementi budu inline (u istom redu), ali ipak prihvataju širinu, visinu, marginu/padding itd.
margin i padding funkcionišu normalno — što ne bi bio slučaj ako je element “display: inline”.
Ako nema dovoljno horizontalnog prostora — elementi će se prelomiti u sledeći red (flow će ih prelomiti), što omogućava fleksibilnost.

Kada paziti ili ograničenja

Iako inline-block omogućava horizontalni raspored, razmaci (spaces, newline) između HTML elemenata utiču — često se desi da “kutije” izgledaju sa razmakom između, što ponekad nije poželjno. (To možeš spomenuti i dati savete — npr. uklanjanje razmaka između tagova, komentarisanje razmaka, ili korišćenje CSS margin negativnog vrednosti — u zavisnosti od nivoa kursa.)
Za složenije rasporede (npr. responsive mreže, kompleksne strukture) danas dosta toga radi i sa fleks i grid sistemima — ali inline-block i dalje ima svoju primenu, posebno za jednostavne rasporede ili retro kompatibilnost.

Zaključak
inline-block je zgodan i veoma koristan alat u CSS-u: kombinuje fleksibilnost “inline” ponašanja sa moćima “block” elemenata. Kada želiš da elementi stoje horizontalno, a da imaju kontrolisanu veličinu i razmake — inline-block je odličan izbor.

(Opcionalno) Kratak zadatak/vežba za učenike
Neka naprave tro-kolonski raspored u kom su tri “kartice” (div-ovi) poredane horizontalno, svaki sa slikom i naslovom, koristeći display: inline-block. Neka postave marginu, padding, i border, i vide kako se ponaša kad smanje širinu prozora (da se elementi prelome u novi red).