seems `border-box` not working with inline-block of `a` tag

Question

I am trying to integrate the box-sizing but seems not working. any one help me to understand the issue here..

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

There are two main problems in the code: first, as @Daniel pointed out in his answer, the dimensions of the element must be made explicit so as to prevent automatic resizing. Additionally, as noted in this answer, inline-block elements conflict with border-box sizing, but there are several workarounds.

For one, the CSS attribute overflow: hidden can also be added to the element in question. Alternatively, it is possible to use vertical-align: top to ensure all elements have the same baseline. A functional example can be seen below, with a larger border for emphasis:

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

You need to explicitly set the value of the dimension that you want the browser to use the border-box calculation for.

As per the spec in reference to the border-box value:

The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified . As the content width and height cannot be negative, this computation is floored at zero.

So set the width and/or height property for your a elements and then the padding/border will be subtracted from this.

box-sizing: border-box; values for elements without specified width or height dimensions are ignored.