При появлении бордера у ссылки блок увеличивается

309

26 ноября 2016, 18:48

В состоянии :hover у ссылки появляется border и за счет этого высота блока увеличивается. В проекте используется bootstrap. Вот код (только в местном редакторе это не воспроизводится почему-то):

.login-panel-modal-content { 
    background: #e84812; 
    padding: 20px; 
    border-bottom: 1px solid #444848; 
    margin-bottom: 5px; 
} 
.login-panel-modal-content a { 
  float: right; 
    text-decoration: none; 
    border-bottom: none; 
} 
.login-panel-modal-content a:hover { 
    border-bottom: 1px solid #fff; 
}

<div class="login-panel-modal-content"> 
                 
                 
                <form> 
                    <div><input placeholder="Логин" name="login"></div> 
                    <div><input placeholder="Пароль" name="password"></div> 
                    <div class="login-panel-modal-content-btn clearfix"> 
                        <a  class="pull-right" href="">войти</a> 
                    </div> 
                </form> 
            </div>

Как сделать чтобы при появлении у ссылки border высота блока не увеличивалась?

Answer 1

Предложу border-bottom: none; заменить на border-bottom: 1px solid transparent;

.login-panel-modal-content { 
    background: #e84812; 
    padding: 20px; 
    border-bottom: 1px solid #444848; 
    margin-bottom: 5px; 
} 
.login-panel-modal-content a { 
    display: block; 
    float: right; 
    text-decoration: none; 
    border-bottom: 1px solid transparent; 
} 
.login-panel-modal-content a:hover { 
    border-bottom: 1px solid #fff; 
}

<div class="login-panel-modal-content"> 
  <form> 
    <div><input placeholder="Логин" name="login"></div> 
    <div><input placeholder="Пароль" name="password"></div> 
    <div class="login-panel-modal-content-btn clearfix"> 
       <a  class="pull-right" href="">войти</a> 
    </div> 
  </form> 
</div>