Border expands div height

Question

I'm having an issue with borders in css, they are set to hidden on normal state and 1px on hover. The result is this:

On mouseover, the lower row gets pushed down by 1px. I've tried to add box-sizing:border-box, but that didn't help.

.menu-sidebar {

    margin-top:25px;
}

.iconmenutest{
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    vertical-align: middle;
    font-size: 3em;
    text-align: center;
    background-color:rgba(40,40,40,0.9);
    color:gray;
    border:hidden;
    cursor: pointer;
}

.iconmenutest:hover  {
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    background: rgba(40,40,40,0.3);
    border: 1px dotted gray;
}

Here's the html:

 <div class="col-md-12">
        <div class="menu-sidebar row">
            <div class="col-md-4 iconmenutest">
                <div class="iconmenu">
                    <i class="ion-power"></i>
                </div>
            </div>
            <div class="col-md-4 iconmenutest">
                <div class="iconmenu">
                    <i class="ion-alert-circled"></i>
                 </div>
            </div>
            <div class="col-md-4 iconmenutest">
                <div class="iconmenu">
                    <i class="ion-android-add"></i>
                </div>
            </div>
            </div>
            <div class="row">
            <div class="col-md-4 iconmenutest">
                  <div class="iconmenu">
                      <i class="ion-power"></i>
                   </div>
             </div>
             <div class="col-md-4 iconmenutest">
                   <div class="iconmenu">
                       <i class="ion-alert-circled"></i>
                   </div>
             </div>
             <div class="col-md-4 iconmenutest">
                   <div class="iconmenu">
                       <i class="ion-android-add"></i>
                   </div>
             </div>
             </div>
             <div class="row">
             <div class="col-md-4 iconmenutest">
                   <div class="iconmenu">
                        <i class="ion-power"></i>
                   </div>
             </div>
             <div class="col-md-4 iconmenutest">
                  <div class="iconmenu">
                        <i class="ion-alert-circled"></i>
                  </div>
             </div>
             <div class="col-md-4 iconmenutest">
                   <div class="iconmenu">
                        <i class="ion-android-add"></i>
                   </div>
             </div>
             </div>
           </div>
        </div>

What should I do to keep layout without the grey line you see on the picture?

Answer 1

You have two great options to work with this

1. Transparent border

dont set hidden border use transparent color,so it will remain there but not be visible

border: 1px dotted transparent;

2. Use Outline

Set outline instead of border in hover

 outline: 1px dotted gray;

The outline is not a part of the element's dimensions, therefore the element's width and height properties do not contain the width of the outline.

Answer 2

Instead of setting it to "hidden" (i guess you meant to 0px), set it to transparent with the same width

border: 1px solid transparent;