Kas yra inline-block CSS?

inline-block — tai CSS savybės display reikšmė, leidžianti elementams elgtis kaip eilutės elementams (užima tik reikalingą plotį ir nepradeda naujos eilutės), tačiau tuo pačiu leidžia nustatyti plotį, aukštį, tarpelius (margin, padding) iš bet kurios pusės, kaip blokiniams elementams.

Pagrindinės savybės:

• Eilutės išdėstymas: Elementai su display: inline-block išsidėsto vienas šalia kito toje pačioje eilutėje, jei vietos pakanka.
• Dydžių atsižvelgimas: galima nustatyti width ir height. Turinys pagal numatytuosius nustatymus nurodo dydį, jei jie nėra nustatyti.
• Pilni tarpai ir rėmeliai: taikomi margin, padding ir border iš visų pusių (top, right, bottom, left), skirtingai nuo eilutės elementų (inline), kur vertikalūs tarpai ir rėmeliai neturi įtakos šalia esančių elementų išdėstymui.
• Vertikalus išlyginimas: galima naudoti vertical-align savybę, kad išlygintumėte elementus eilutėje.

Pavyzdys:

/* Elementai bus išdėstyti eilutėje, turės nustatytus dydžius ir tarpelius */
.inline-block-element {
  display: inline-block;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 1px solid black;
}

Taikymo sritis:

• Horizontalios navigacijos meniu kūrimas.
• Blokų turinio išdėstymas kaip kortelės vienoje eilutėje.
• Elementų derinimas ir išlyginimas, kurie turi būti šalia, bet su tam tikrais dydžiais.

Palyginimas su kitomis display reikšmėmis:

display	Aprašymas	Dydžių atsižvelgimas (width/height)	Vertikalių tarpų atsižvelgimas (margin-top/bottom)	Eilutės išdėstymas
block	Visada pradeda naujoje eilutėje, užima visą prieinamą plotį.	Taip	Taip	Ne
inline	Išsidėsto teksto eilutėje, užima tik reikalingą plotį.	Ne	Ne (veikia margin-left/right)	Taip
inline-block	Išsidėsto eilutėje, bet elgiasi kaip blokas pagal dydį ir tarpelius.	Taip	Taip	Taip