Чем inline-block отличается от inline?

Question

Accepted Answer

## Короткий ответ

Оба идут в строке, но **`inline-block` — «коробочка» с width/height/margin по вертикали**, а `inline` — в основном «фрагмент текста».

## Поведение

- **`inline`**: `width`/`height` почти не задаются; вертикальные margin/padding ведут себя иначе; переносится по словам.
- **`inline-block`**: можно задать размеры, padding/margin со всех сторон; элементы стоят рядом, но как блоки.

```css
span.label { display: inline; padding: 8px; } /* высота строки почти не растёт как у блока */
span.chip { display: inline-block; width: 80px; height: 32px; }
```

Между `inline-block` в разметке часто появляется «зазор» из пробелов HTML — классическая ловушка (убирать пробелы, `font-size: 0` на родителе или лучше flex/`gap`).

## Итог

`inline` — текст в потоке; `inline-block` — блочная модель внутри строки. Для кнопок-рядом чаще flex, чем цепочка `inline-block`.