Border z hover'a rozszerza element

Question

Witam.

W jaki sposób mogę dodać border w hover'ze, żeby nie rozjeżdżały mi się elementy?

W załączonym kodzie poradziłem sobie z tym problemem, zmniejszając padding o wysokość border'a, jednak wydaję mi się, że nie jest to poprawnie zrobione.

https://gist.github.com/ajzyn/60543368f77235269cd1fc1163a3f48a

Z góry dziękuję za odpowiedzi :) Pozdrawiam

Answer 1

box-sizing: border-box;

powinno pomóc.

Comments

Niestety nie pomogło ;/

---

Pokaż cały kod.

---

https://gist.github.com/ajzyn/f4e7b9c82718344cdfae0b985962112d

Przy okazji, może znacie jakiś lepszy pomysł na rozmieszczenie elementów na stronie ?

Pozdrawiam

Answer 2

To powinno działać
 

#test{
     margin-right: 8px;
     margin-left: 8px;
     margin-top: 8px;
     margin-bottom: 8px;
}
#test:hover{
     margin-right: 4px;
     margin-left: 4px;
     margin-top: 4px;
     margin-bottom: 4px;
     border: 4px solid black;
}