bold font makes width change

Question

I have a div with some text inside and a border.

When I hover on that div, I want the font to be bold.​

This makes my div a bit wider - which causes an annoying flicker.

div {
  border: 1px solid black;
  display: inline-block;
  padding: 20px;
}

span {
  padding: 20px;
}

div:hover {
  font-weight: bold;
}

<div><span>This is my div</span></div>

How can I resolve this problem?

EDIT:

The div's width has to grow with content, but not with weight.

Answer 1

Your div is inline-block and doesn't have an explicit width, so it shrink-wraps the content. The font is a proportional font, so it gets thicker (and takes up more horizontal space) when it is made bold.

Either give the div a fixed width, set it to block, or use a monospace font.

Answer 2

You can simulate the bold affect using Text Shadow. so you would have

div:hover { 
text-shadow: 0 0 1px black, 0 0 1px black;
} 

You can control the affect by changing the 1px to a higher or lower number. You will need to change the color of the shadow depending on your text color too. Check out a whole article about this solution here: https://www.sitepoint.com/quick-tip-fixing-font-weight-problem-hover-states/