bold font makes width change
css, html
Solution
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.
Problem
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.