Пляшет кнопка не смотря на border-box

[Zverushka]

Не пойму что за фигня. Красная кнопка "купить" на сайте http://zverushka.zz.mu/chehol/

Обычное состояние padding: 1px 0 0 2px;. Наведенное - padding: 0;

Стоит box-sizing: border-box, но когда на навожу на кнопку - все блоки пляшут. Не понимаю, почему. При этом похожую кнопку я реализовала и все ок было, а тут видимо закралась какая-то ошибка. Не могу понять, что за ошибка.

[SelenIT]

У li-шек, которые d:i-b, v-a дефолтный — baseline.

 

baseline'ом инлайн-блока по умолчанию (без смены overflow и т.п.) считается таковой нижней строки текста в нем. В данном случае нижняя строка текста — это текст кнопки. Который и сдвигается при наведении, сдвигая базовую своей li-шки.

 

Проще всего решить, сменив v-a для li-шек.

[Zverushka]

@SelenIT, Блин, ты ЧУДО!!!! Спасибо огроменное! Все оказалось очень хитро!