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

Базовая идея

Оба участвуют в строке, но модель коробки разная.

Сравнение

• inline — как текст: width/height обычно не задаются осмысленно; вертикальные margin/padding ограничены влиянием на line box.
• inline-block — строчный уровень + полноценный block-box: можно задать width, height, margin/padding со всех сторон.

.badge {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  width: 4rem;
  text-align: center;
}

Минус inline-block — зазоры из пробелов в HTML между тегами (лечится flex/grid или трюками со font-size).

Итог

Нужен «кусок в строке с размерами» — inline-block (или flex-элемент). Чистый текст/ссылка без коробки — inline.