How to put link border without increasing menu size

Question

I have a menu, and wanted to put the mouse on top the link had a border, I managed to put, but the problem is that it increases the size of the menu when the border appears, how to avoid this ?

Current Code:

    .main-nav-outer{
    padding:0px;
    border-bottom:1px solid #dddddd;
    box-shadow:0 4px 5px -3px #ececec;
    position:relative;
    background:#fff;
}
.main-nav{
    text-align:center;
    margin:3px 0 0px;
    padding:0;
    list-style:none;
    max-height: 75px;
}
.main-nav li{
    display:inline;
    margin:0 1px;
}
.main-nav li a{
    display:inline-block;
    color:#222222;
    text-transform:uppercase;
    font-family: 'Fira Sans', sans-serif;
    text-decoration: none;
    letter-spacing: 2px;
    line-height:20px;
    margin:17px 32px;
    transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -webkit-transition:all 0.3s ease-in-out;
}

.main-nav li a:hover{
    font-size: 20px;
    padding: 10px;
    border-radius: 3px;
    border: 1px solid #154372;
    outline: none;
    text-decoration:none;
    color: #154372;
}

Answer 1

box-sizing

There’s a property that controls this, the box-sizing:

box-sizing: border-box;

When used according to the line above, it causes the measure of the element to include the border. In other words, with border-box the thickness will be deducted from the content and not from the surroundings.

outline

Alternatively you can use the outline in place of border. The outline is a visual element that does not affect layout:

Compatibility: https://caniuse.com/#search=Outline

It is up to the designer analyze which is most suitable for your specific case, observed the difference in behavior in relation to content and spacings.

Demonstration

box-Sizing:

div    { display:inline-block; vertical-align:middle;
         width:100px;height:60px; background-color:#fcc;
         text-align:center; }

#b, #c { border:4px solid black; }
#b     { box-sizing:border-box; }

<div id="a">sem borda</div>
<div id="b">border-box</div>
<div id="c">padrão</div>
<div id="d">sem borda</div>

Outline:

div    { display:inline-block; vertical-align:middle;
         width:100px;height:60px; background-color:#fcc;
         text-align:center; }

#b, #c { outline:4px solid black; }
#c     { outline-offset:-4px; }

<div id="a">sem outline</div>
<div id="b">com outline</div>
<div id="c">outline<br>com offset</div>
<div id="d">sem outline</div>

Answer 2

There are two more options that can and suit one with box-shadow and another with calc() discounting from height and width the thickness of the edge.

Option 1: Using box-shadow with inset and spread-radius including with this technique it is possible to make several edges inside and out of the element without affecting anything that is around!

OBS: spread-radius is the fourth parameter of the property, it is optional and you can not use it always. I put in between " 4px " just for you to see better.

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px " 4px " rgba(0, 0, 0, 0.2);

See the example below, I used the model of our friend @Bacco that is well didactic.

html, body {
    width: 100%;
    height: 100%;
    margin: 20px;
    padding: 0;
}
div { 
    display:inline-block; vertical-align:middle;
    width:120px;height:60px; background-color:#fcc;
    text-align:center; 
}
#a { box-shadow: 0 0 4px black inset; }
#b, #c { box-shadow: 0 0 0 4px black;}
#c { box-shadow: 0 0 0 4px black inset; }
#e { box-shadow: 0 0 4px black inset, 0 0 0 4px black, 0 0 0 6px red, 0 0 0 8px lime, 0 0 0 10px purple;} 

<div id="a">box-shadow inset sem "spread-radius"</div>
<div id="b">com box-shadow</div>
<div id="c">box-shadow inset com "spread-radius"</div>
<div id="d">sem box-shadow</div>
<div id="e">várias box-shadow e 1 inset</div>

Here you can read more about the property box-shadow: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

---

Option 2: In this technique you will centralize the content of Divs with Flex-Box and then place the embroidery on the :hover but excluding the width of the border from the height and width of the Div

Ex: If vc has a 4px edge vc will have to drop 8px from the height and width of the DIV, 8px because it is 4px on each side, so we have 8px

div:hover {
    border: 4px solid black;
    width:calc(120px - 8px);
    height:calc(60px - 8px); 
}

See Example below for the applied technique

html, body {
    width: 100%;
    height: 100%;
    margin: 20px;
    padding: 0;
}
div { 
    background-color:#fcc;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    margin: 2px;
    width:120px;
    height:60px; 
}
div:hover {
    cursor: pointer;
    border: 4px solid black;
}
div.calc:hover {
    cursor: pointer;
    border: 4px solid black;
    width:calc(120px - 8px);
    height:calc(60px - 8px); 
}

<section style="display: flex;flex-direction: row;">
    <div class="calc">COM calc()</div>
    <div class="calc">COM calc()</div>
    <div>SEM calc()</div>
    <div>SEM calc()</div>
</section>

Answer 3

Another way is by using the pseudo-element ::after hidden that will only appear in :hover.

Then you include an edge on the ::after and resize it with less 2px of the total size of the button. This will not affect the menu size.

Take an example of how it would look:

body{
   background: #000;
}

.main-nav{
    text-align:center;
    margin:3px 0 0px;
    padding:0;
    list-style:none;
    xmax-height: 75px;
    background: #fff;
    min-height: 74px;
}

.main-nav li{
    display:inline;
    margin:0 1px;
}

.main-nav li a{
    display:inline-block;
    color:#222222;
    text-transform:uppercase;
    font-family: 'Fira Sans', sans-serif;
    text-decoration: none;
    letter-spacing: 2px;
    line-height:20px;
    margin:17px 32px;
    transition:all 0.3s ease-in-out;
    -moz-transition:all 0.3s ease-in-out;
    -webkit-transition:all 0.3s ease-in-out;
    position: relative;
}

.main-nav li a:hover{
    font-size: 20px;
    padding: 10px;
    outline: none;
    text-decoration:none;
    color: #154372;
}

.main-nav li a:hover::after{
    display: block;
}

.main-nav li a::after{
   content: '';
   width: calc(100% - 2px);
   height: calc(100% - 2px);
   border: 1px solid #154372;
   border-radius: 3px;
   position: absolute;
   top: 0;
   left: 0;
   display: none;
}

<ul class="main-nav">
   <li><a href="#">Botão 1</a></li>
   <li><a href="#">Botão 2</a></li>
</ul>