-1

.square {
    display: block;
    width: 100px;
    height: 100px;
    color: black;
    text-align: center;
    transition: border .2s linear;
}

.square:hover {
    border: 2px red solid;
}
<div class="square">
    Square
</div>

2
  • первое, что придумал, сделать в .square border: 2px transparent solid
    – Super3283u
    Commented 28 сент. 2021 в 17:17
  • Как вариант box-sizing: border-box в зависимости от желаемого поведения
    – andreymal
    Commented 28 сент. 2021 в 17:18

1 ответ 1

2

Какой именно отступ убрать нужно? Если нужно убрать смещение текста, то можно сделать так.

.square {
  display: block;
  width: 100px;
  height: 100px;
  color: black;
  text-align: center;
  transition: border-color .2s linear;
  border: 2px solid transparent;
}

.square:hover {
  border-color: red;
}
<div class="square">
  Square
</div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.