HTML要素を保持する方法位置はそのままで、位置を変更することはできません

Question

以下は2つの画像です。私が "ロール"を乗り越えるとき、私はパディングを増やしたいと思うし、また、 "ロールを追加"ボタンがその位置を変えたくないのです。それを止める方法はありますか？

私は役割の上に置くと、私は役割

の上にマウスを移動しないでください。以下は

CSS

.tab-group { 
    list-style: none; 
    padding: 0; 
    margin: 0 0 40px 0; 
} 

.tab-group:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

.tab-group li a { 
    display: block; 
    text-decoration: none; 
    background: rgba(160, 179, 176, 0.25); 
    color: #a0b3b0; 
    font-size: 20px; 
    float: left; 
    width: 14.25%; 
    text-align: center; 
    cursor: pointer; 
    -webkit-transition: .5s ease; 
    transition: .5s ease; 
} 

.tab-group li a:hover { 
    background: #179b77; 
    color: #ffffff; 
    padding: 8px; 
} 

.tab-group .active a { 
    background: #1ab188; 
    color: #ffffff; 
} 

.tab-content>div:last-child { 
    display: none; 
} 

Answer 1

あなたがのようなものを使用することができますホバリング時に何が欲しいの役割が大きく表示されている場合：

.tab-group li a:hover { 
    background: #179b77; 
    color: #ffffff; 
    transform:scale(1.1); 
} 

の代わりに、パディング

Answer 2

だけのパディングon:hover状態

を削除

<ul class="tab-group"> 
    <li class="tab active"><a href="#roles">Roles</a></li> 
    <li class="tab "><a href="#user">User</a></li> 
</ul> 
<ul class="tab-onebtn"> 
    <li class="logouttab"> <a href="<?php echo base_url(); ?>Login/logout" style="float: left;"> Add Role </a> </li> 
</ul> 

参考

のための私のHTMLとCSSコードです

.tab-group li a:hover { 
    background: #179b77; 
    color: #ffffff; 
    /*padding: 8px;*/ 
} 

demo