Two divs were created with padding in each one.
div {
display:inline;
background-color:yellow;
padding: 2px 2px 2px 2px;
}
div:hover {
font-weight:bold;
}<body style="font:15px arial,sans-serif;">
<div>one</div>
<div>two</div>
</body>The CSS code above sets the font weight to bold on hover for the divs.
Once the first div is hovered over, the second div shifts slightly to the right due to the additional space needed for text with bold font.
Is there any way to prevent this shifting? Can we consider the extra space even when the font weight is normal (i.e., when the div isn't being hovered)?
Your assistance is greatly appreciated!