Css Hover Border Makes Inline Elements Adjust Slightly

When I make border in hover, another element slightly moved, how to make it stayed in their position?

you can use this trick

.navbar-menu a{
    color: inherit;
    text-decoration: none;
    padding: 8px;
    border: 2px solid transparent; /* add this line */
}

so basically initially border is transparent and on hover it only gets color visible and hence no mess up in position

Add a CSS border on hover without moving the element

You can make the border transparent. In this way it exists, but is invisible, so it doesn't push anything around:

.jobs .item {
   background: #eee;
   border: 1px solid transparent;
}

.jobs .item:hover {
   background: #e1e1e1;
   border: 1px solid #d0d0d0;
}

<div class="jobs">
  <div class="item">Item</div>
</div>

Why would a div inscrease in size when a border shows up after the mouse hovers it? CSS

When adding a border you add to the element's height.

There are 2 ways you could avoid that :

add a 3px black border to every element, and only change its color
when :hover
specify box-sizing: border-box; and a height, so the element's
height includes the border (and the padding)

Inside content pushed by adding border on hover

Border does affect the width of the container, so if you don't want the jump, add a transparent border to start with of the same width and then change the color on hover.

<!DOCTYPE html>
<html>
<head>
<style>
p{
width: 130px;
min-height: 30px;
padding: 10px;
border-radius: 12px;
outline: 1px solid green;
background: yellow;
border: 1px solid transparent;
}
p:hover{
border: 1px solid black;
}
</style>
</head>

<body>

<p style="color:red;">A red paragraph.</p>

</body>
</html>

div Expand its size on hover due to border

Why not just start your button with a border, instead of adding it on hover? As it's the same colour as the background, it makes no difference to the non-hover state

.payment-box {  padding: 5px;  text-align: center;  border: 1px solid blue;  width: 150px;}
.payment-logo {  height: 100px;}
.payment-link {  color: #fff;  padding: 12px;  background: #E2231A;  margin: 20px auto 5px auto;  display: inline-block;  font-weight: 550;  border: 1px solid #E2231A; /* move this from the hover */}
.payment-link:hover {  color: #E2231A;  background: #fff;}

<div class="col-md-4">  <a href="">    <div class="payment-box">      <div class="payment-logo">        <img src="logo.jpg" width="100%" height="100%" alt="logo" />      </div>      <div class="payment-link">        click here      </div>    </div>  </a></div>

Border on hover moves divs inside parent

Although you applied it box-sizing: border-box; and added css width but it solve only horizontal movement because not fixed any height. So overcome this situation you should apply 1px size transparent border like following:

.candidate{
width:310px;
margin: 0 auto 10px;
height: auto;
padding: 16px 15px;
border: 1px solid transparent; /* Key Line */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

How to create a CSS hover; over the li tag with border, flicked?

Initially set the border-color to transparent and on :hover state set border-color to your choice

Stack Snippet

li {  background: red;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;  border-top: 1px solid transparent;  border-bottom: 1px solid transparent;}
li:hover {  border-color: blue;}

<ul>  <li>1</li>  <li>2</li>  <li>3</li>  <li>4</li>  <li>5</li>  <li>6</li>  <li>7</li>  <li>8</li></ul>

Inline elements shifting when made bold on hover

Pre-set the width by using an invisible pseudo-element which has the same content and styling as the parent hover style. Use a data attribute, like title, as the source for content.

li {
    display: inline-block;
    font-size: 0;
}

li a {
    display:inline-block;
    text-align:center;
    font: normal 16px Arial;
    text-transform: uppercase;
}

a:hover {
    font-weight:bold;
}

/* SOLUTION */
/* The pseudo element has the same content and hover style, so it pre-sets the width of the element and visibility: hidden hides the pseudo element from actual view. */
a::before {
    display: block;
    content: attr(title);
    font-weight: bold;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

<ul>
    <li><a href="#" title="height">height</a></li>
    <li><a href="#" title="icon">icon</a></li>
    <li><a href="#" title="left">left</a></li>
    <li><a href="#" title="letter-spacing">letter-spacing</a></li>
    <li><a href="#" title="line-height">line-height</a></li>
</ul>