box-sizing border appear on hover contents moving

css, html

Solution

div.block {
   box-sizing: border-box;
   border: 1px solid [your bg color];

}
div.block:hover {
   border: 1px solid orange;
}

Try this :)

When you hover it adds a border. So its making extra pixels. If you add a border to original item(this case block) IT wont have to add new pixels, as they already exsist.

As said below: border 1px solid transperparent wil work fine to

Problem

code: ``` <div class="block"> </div> div.block { box-sizing: border-box; } div.block:hover { border: 1px solid orange; } ``` When hovering the block with the use of box-sizing, the contents inside is moving, how to prevent this?

Original source