when hovering over an element, I do a border. but the disco begins.

enter image description here

how to remove these disco dances?

li:hover { padding: -2px; border: 1px solid; }
  • five
    Why are you doing padding: -2px ;? - Orest Ganulyak February

1 answer 1

Border affects block sizes. It is possible in the normal state to set a transparent border, and when hovering just change its color, or use the outline

 h5 { margin: 0; } ul { padding: 0; list-style-type: none; } li { display: inline-block; padding: 10px; border: 2px solid transparent; } li:hover { border-color: red; } .without li, .outline li { border: none; } .without li:hover { border: 2px solid red; } .outline li:hover { outline: 2px solid red; } 
 <h5>C предустановленной границей</h5> <ul> <li>asdasdasdasd</li> <li>asdasdasdasd</li> <li>asdasdasdasd</li> </ul> <h5>Без предустановленной границы</h5> <ul class="without"> <li>asdasdasdasd</li> <li>asdasdasdasd</li> <li>asdasdasdasd</li> </ul> <h5> C outline</h5> <ul class="outline"> <li>asdasdasdasd</li> <li>asdasdasdasd</li> <li>asdasdasdasd</li> </ul>