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.