Почему Дёргаются элементы при наведении?

Question

[Semmy_99]

Подскажите пожалуйста, есть список ul в li находится span , span'у присвоена картинка. При наведении добавляю border для спана и элементы начинают "дрыгаться". В чем проблема ?

У li ширина в 25%. Если это имеет значение.

Answer 1

[WQP]

Изначально добавьте прозрачный бордер, а при наведении уже меняйте у него цвет

Answer 2

[Олег]

для hover не назначай border или padding!
либо делаешь бордер сразу с прозрачным border и при hover добавляешь цвет

Answer 3

[Олег]

Всё правильно сказали. Делаешь border: 1px solid transparent. А при hover задаёшь нужный цвет.
Есть ещё один вариант, использовать вместо border - outline. Но у него некоторые особенности. Он не занимает места в потоке, а значит может скрывать под собой другие элементы. И ещё его можно задать только сразу для всех сторон.

Answer 4

[iBird Rose]

border занимет пространство. на это самое пространство он и дрыгается. задай изначально для спана border с transparent цветом. а потом при наведении цвет меняй