при hover появляется border и елементы сьежают

Question

мне нужно чтобы ничего не двигалось

.elem {
    padding: 10px 10px;
    width: 300px;
}

.elem:hover {
    border: 1px solid #000;
}

 <ul>
        <li class="elem">dvsd</li>
        <li class="elem">sdfsdf</li>
        <li class="elem">sdfsdf</li>
    </ul>

Answer 1

.elem {
    padding: 10px 10px;
    width: 300px;
    border: 1px solid transparent;
}

.elem:hover {
    border-color: #000;
}

<ul>
    <li class="elem">dvsd</li>
    <li class="elem">sdfsdf</li>
    <li class="elem">sdfsdf</li>
</ul>