В чём разница между inline и inline-block?

Question

Accepted Answer

## Коротко
Оба участвуют в строковом потоке, но **inline-block** образует блочный бокс: можно задать width/height, вертикальные margin работают предсказуемее.

## Сравнение

```css
.badge { display: inline; }        /* ширина по тексту */
.chip { display: inline-block; width: 4rem; padding: .25rem .5rem; }
```

У inline горизонтальные padding/margin влияют, вертикальные — частично «не раздвигают» строку как у блока. Inline-block ведёт себя как мини-блок в тексте (кнопки-ссылки рядом). Минус: пробелы между тегами дают зазоры (борьба: flex на родителе).

## Итог
Нужны размеры и padding «как у кнопки» в строке — `inline-block` (или flex-item). Чистый текст — `inline`.