CSS div jumped when adding a border

  TL;DR: Using  box-shadow  to highlight the div could be a good idea instead of using border. Adding a border to a div So, adding a border to a box, is pretty simple when you use the  border  property. Let’s start a first basic example by drawing a small square and adding a red border to it. < div class = " box border " > Border </ div > .box { width : 100px ; height : 100px ; padding : 5px ; margin-bottom : 10px ; } .border { border : 1px solid red ; &:hover { border : 3px solid red ; } } Do you see what’s happening when your mouse is hovering the box? Your content move forward and the rendering is not really great. If the normal border is 3px and when hover, it is also 3px. You can fix it with a simple trick to set the initial border to  3px transparent  and then set the final border to  3px red . But here, we have initial of  1px  and on hover  3px . That’s came to the sol...