кажется, что border-box не работает со встроенным блоком тега a

Question

Я пытаюсь интегрировать box-sizing, но, похоже, не работает. любой поможет мне понять проблему здесь ..

Live Demo

a{
  display:inline-block;
  background:#fff;
  border:1px solid #ccc;
  box-sizing:border-box;
  padding:1rem;
}

a.active{
  border:0;
  background:orange;
}

<a class="active" href="#">EN</a><a href="#">FR</a>

Answer 1

В коде есть две основные проблемы: во-первых, как @Daniel указал в своем ответе, размеры элемента должны быть явными, чтобы предотвратить автоматическое изменение размера. Кроме того, как отмечено в этот ответ , элементы inline-block конфликтуют с размером border-box, но есть несколько обходных путей.

Например, атрибут CSS overflow: hidden также может быть добавлен к рассматриваемому элементу. Кроме того, можно использовать vertical-align: top, чтобы все элементы имели одинаковую базовую линию. Функциональный пример можно увидеть ниже, с большей границей для выделения:

a{
  display:inline-block;
  background:#fff;
  border:10px solid #ccc;
  box-sizing:border-box;
  width:5em;
  height:5em;
  overflow:hidden;
  padding:1rem;
}

a.active{
  border:0;
  background:orange;
}

<a class="active" href="#">EN</a><a href="#">FR</a>

Answer 2

Вам необходимо явно установить значение измерения, для которого браузер будет использовать вычисление border-box.

Согласно спецификации со ссылкой на значение border-box:

Ширина и высота содержимого рассчитываются путем вычитания границы и ширины отступов соответствующих сторон от указанного , Поскольку ширина и высота содержимого не может быть отрицательно, это вычисление смещено в ноль.

Так что задайте свойство width и / или height для ваших элементов a, и тогда отступы / границы будут вычтены из этого.

box-sizing: border-box; значения для элементов без заданных размеров ширины или высоты игнорируются.