Mi az az inline-block a CSS-ben?

inline-block — ez a CSS display tulajdonságának értéke, amely lehetővé teszi az elemek számára, hogy inline elemként viselkedjenek (csak a szükséges szélességet foglalják el, és nem kezdődnek új sorban), ugyanakkor lehetőséget ad arra, hogy szélességet, magasságot, margót (margin, padding) minden oldalról beállítsanak, mint a blokk elemek.

Fő jellemzők:

• Sorban való elhelyezés: Az inline-block-ként beállított elemek egymás után, ugyanazon a soron helyezkednek el, ha van elég hely.
• Méret figyelembevétele: Beállítható width és height. Az alapértelmezett méret a tartalom szerint alakul, ha nincs megadva.
• Teljes margók és keretek: A margin, padding és border minden oldalról alkalmazható (felső, jobb, alsó, bal), ellentétben az inline elemekkel, ahol a vertikális margók és keretek nem befolyásolják a szomszédos elemek elhelyezkedését.
• Vertikális igazítás: A vertical-align tulajdonság használható a soron belüli elemekhez viszonyított igazításhoz.

Példa:

/* Az elemek egymás mellett helyezkednek el, meghatározott méretekkel és margókkal */
.inline-block-element {
  display: inline-block;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 1px solid black;
}

Alkalmazási területek:

• Horizontális navigációs menük létrehozása.
• Tartalomblokkok elhelyezése kártya formájában egy sorban.
• Az elemek egymás mellett való elhelyezése, de meghatározott méretekkel.

Összehasonlítás más display értékekkel:

display	Leírás	Méretek figyelembevétele (width/height)	Vertikális margók figyelembevétele (margin-top/bottom)	Sorban való elhelyezés
block	Mindig új sorban kezd, elfoglalja a rendelkezésre álló teljes szélességet.	Igen	Igen	Nem
inline	Szöveghez igazítva, csak a szükséges szélességet foglalja el.	Nem	Nem (margin-left/right befolyásolja)	Igen
inline-block	Sorban helyezkedik el, de viselkedése blokkhoz hasonló méret és margó tekintetében.	Igen	Igen	Igen