In the :hover state, the link appears border and due to this the height of the block increases. The project uses bootstrap. Here is the code (for some reason this is not reproduced in the local editor only):

 .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>

How to make the height of the block not increase when the border appears at the border ?

    1 answer 1

    I will offer border-bottom: none; replace with 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>

    • thanks, everything works) - Marina Voronova