One issue I often face is the desire to add a border to an element on hover, only to find that as the border appears, the element's height and width change, causing it to visually jump and potentially push other elements. Is there a solution for this problem that doesn't involve using max-width and max-height?
Fiddle: https://jsfiddle.net/xdzm9yfu/
<style>
#mydiv { background: yellow; padding: 15px; border: 0; }
#mydiv:hover { border: 1px solid black; }
</style>
<div id="mydiv">
<p>Check out this element. Notice how the text shifts when the border shows up.</p>
</div>