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

Это три значения display, и они по-разному ведут себя со строкой и размерами:

block (div, p, h1, section):

• занимает всю доступную ширину, следующий блок встаёт на новую строку;
• можно задавать width, height, любые margin/padding.

inline (span, a, strong):

• занимает только ширину содержимого, элементы идут в строку друг за другом;
• width и height игнорируются — поэтому ваша ширина у ссылки и не применилась;
• вертикальные margin/padding визуально почти не раздвигают соседей.

inline-block — гибрид:

• стоит в строке рядом с другими (как inline);
• но при этом слушается width, height и всех отступов (как block).

.tag {
  display: inline-block;
  width: 100px;
  padding: 6px 12px; /* теперь работает! */
}

Когда что брать: block — секции и структурные блоки; inline — кусочки текста; inline-block — когда нужно несколько элементов в ряд с заданными размерами (кнопки, теги, пункты меню). Хотя для рядов сейчас чаще берут flex — он удобнее, чем inline-block с его «прыгающим» базлайном и щелями от пробелов в HTML.