Почему перемещается текст при наведении?

Question

[Павел Субботин]

Решил сделать кнопки на сайте, но что бы при наведении они обводились рамкой. Почитал об этом и написал это:

.menu:nth-child(1):hover{
	border: 1px solid gray;
	border-radius: 2px;
	padding: 4px;
	background: gray;
}

Но из-за padding мой текст куда-то вверх съезжает, можно как-то по другому изменить размер рамки или как-то позицию зафиксировать?

Comments

[Ankhena]

1. Есть свойство box-sizing, которое отвечает за параметры входящие в итоговую ширину элемента. Либо width, а паддинги и бордеры увеличивают конечную ширину либо ширину определяет только width, а паддинги и бордеры внутрь.
2. Зачем вы задаете паддинги только при наведении? Задайте их сразу.
3. Задайте в начальном положении border в цвет фона или прозрачный. (Только без, пожалуйста, без всяких !important, как в совете Steppp)

Еще вы можете выложить код с воспроизводимой проблемой на jsfiddle.net, чтобы мы увидели картину полностью.

Answer 1

[Steppp]

inherit - цвет родителя! impiotant - прозрачный цвет! Сделай все бордеры прозрачными, а при наведении задай цвет!

.menu:nth-child(1){
  border: 1px solid inherit;
  border-radius: 2px;
  padding: 4px;
  background: inherit;
}
.menu:nth-child(1):hover{
  border: 1px solid gray;
  background: gray;
}

Answer 2

[Юпитер Макс]

а без hover стили покажите какие написаны для .menu:nth-child(1)