box-sizing border appear on hover contents moving

Question

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?

Answer 1

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

Answer 2

Add padding and then remove equal to border pixels when hovering.

div.block
{
   box-sizing: border-box;
   padding: 10px;
}
div.block:hover
{
   border: 1px solid orange;
   padding: 9px;
}