3

Как убрать смещение элемента при добавлении border? Так же из за этого смещаются и другие рядом стоящие элементы.

body {
  padding: 20px;
}
a {
  font-size: 30px;
  padding: 15px 30px;

}

a:hover {
  border: 5px solid;
}
<nav>
  <a href="">First</a>
  <a href="">Second</a>
  <a href="">Third</a>
</nav>


Сразу возникла идея сделать через:

box-sizing: border-box - не работает, так как нету четких размеров (width, height)

Подскажите, как лучше все решить?

4 ответа 4

1

Можно при помощи градиентов

body {
  color: #000;
  padding: 20px;
}

a {
  font-size: 30px;
  padding: 15px 30px;
}

a:hover {
  background-image: linear-gradient(#551a8b, #551a8b), linear-gradient(#551a8b, #551a8b), linear-gradient(#551a8b, #551a8b), linear-gradient(#551a8b, #551a8b);
  background-size: 100% 5px, 5px 100%, 100% 5px, 5px 100%;
  background-position: 0 0%, 0% 0, 0 100%, 100% 0;
  background-repeat: no-repeat;
}
<nav>
  <a href="">First</a>
  <a href="">Second</a>
  <a href="">Third</a>
</nav>

1

body {
  padding: 20px;
}
a {
  font-size: 30px;
  padding: 15px 30px;
  border: 5px solid transparent;
}

a:hover {
  border-color: inherit;
}
<nav>
  <a href="">First</a>
  <a href="">Second</a>
  <a href="">Third</a>
</nav>

2
  • при hover достаточно цвет только поменять, а не заново все настройки границ делать
    – Grundy
    20 дек 2020 в 19:52
  • 1
    @Grundy исправлено!
    – MoloF
    21 дек 2020 в 10:06
1

Надо каждый отступ сделать меньше на ширину рамки. Например, если ширина рамки 2px, то надо сделать все внутренние отступы padding: 15px 30px; меньше на 2px.
Вот:

body {
  padding: 20px;
}
a {
  font-size: 30px;
  padding: 15px 30px;

}

a:hover {
  border: 5px solid;
  padding: 10px 25px;
}
<nav>
  <a href="">First</a>
  <a href="">Second</a>
  <a href="">Third</a>
</nav>

0
0

С помощью outline :

body { padding: 20px; }
a { padding: 15px 30px; font-size: 30px; }

a:hover { outline: 5px solid; }
<nav><a href="">First</a><a href="">Second</a><a href="">Third</a></nav>

С помощью box-shadow :

body { padding: 20px; }
a { padding: 15px 30px; font-size: 30px; }

a:hover { box-shadow: 0 0 0 5px currentColor; }
<nav><a href="">First</a><a href="">Second</a><a href="">Third</a></nav>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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