css - cssホバー効果のサイズが大きくなり、他の要素に影響を与える

Question

ボタンがあり、ホバー効果を追加して境界線を変更しました。メニューのレイアウトに影響を与えています。

element{
   border-width:0px;
}
element:hover{
   border:1px solid gray;
}

レイアウトに影響を与えずにそれを行うにはどうすればよいですか？

Answer 1

box-sizing: border-boxボックス内に境界線を配置し、サイズの問題を修正する必要があります。

Answer 2

境界線の幅によって要素の寸法が変わるため、おそらく追加のピクセルを考慮する必要があります。おそらく、このようなことがうまくいくでしょう。

element{
  border:1px solid transparent;
}
element:hover{
  border:1px solid gray;
}