我有一个div，它有两个子项：一个图像和两行文本。我在悬停时将border:1px solid #grey;添加到div中，但出于某种原因，它也会在div中移动子级。
下面是我的例子：http://jsfiddle.net/pmn8y4hd/
.candidates{
width:100%;
height: auto;
background: #FFFFFF;
border: 1px solid #EAEAEA;
padding: 40px 0 45px 0;
margin: 0 0 12px 0;
}
.candidate{
width:310px;
margin: 0 auto 10px;
height: auto;
padding: 16px 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.candidate:hover{
background: #FFFDFC;
border: 1px solid #EAEAEA;
border-radius: 6px;
}
.candidate-details{
height: 48px;
display: flex;
flex-direction: column;
justify-content: center;
}
.candidate-image{
width:48px;
height: 48px;
float:left;
margin: 0 10px 0 0;
}
.candidate-image img{
width:100%;
}<div class="candidates">
<div class="candidate">
<div class="candidate-image">
<img src="images/logo.png" alt="" title="" />
</div><!-- candidate-image -->
<div class="candidate-details">
<h3>Johnny Appleseed</h3>
<h4>Space Monkey at NASA</h4>
</div><!-- candidate-details -->
</div><!-- candidate -->
</div><!-- candidates -->我添加了box-sizing: border-box;，但它可以做任何事情。
虽然您应用了box-sizing: border-box;并添加了css宽度，但它只解决了水平移动，因为没有固定任何高度。因此，克服这种情况，你应该应用1px大小的透明边界，如下所示：
.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;
}
.candidates {
overflow: hidden;
width: 100%;
height: auto;
background: #FFFFFF;
padding: 40px 0 45px 0;
margin: 0 0 12px 0;
}
.candidate {
width: 310px;
margin: 0 auto 10px;
height: auto;
padding: 16px 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: 1px solid white;
}
.candidate:hover {
background: red;
border-radius: 6px;
}
.candidate-details {
height: 48px;
display: flex;
flex-direction: column;
justify-content: center;
;
}
.candidate-image {
width: 48px;
height: 48px;
float: left;
margin: 0 10px 0 0;
}
.candidate-image img {
width: 100%;
}<!DOCTYPE html>
<html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/tried.css">
<!--- FONTS --->
<link href="https://fonts.googleapis.com/css?family=Domine|Roboto" rel="stylesheet" type='text/css'>
<title>Importa Desde China</title>
</head>
<!--- Quitar Subrayado --->
<STYLE>
A {
text-decoration: none;
}
</STYLE>
<!--- Quitar Subrayado --->
<body>
<div class="candidates">
<div class="candidate">
<div class="candidate-image">
<img src="https://i.imgur.com/6jVYOQa.jpg" alt="" title="" />
</div>
<!-- candidate-image -->
<div class="candidate-details">
<h3>Johnny Appleseed</h3>
<h4>Space Monkey at NASA</h4>
</div>
<!-- candidate-details -->
</div>
<!-- candidate -->
</div>
<!-- candidates -->
</body>
</html>检出溢出，https://www.w3schools.com/cssref/pr_pos_overflow.asp这将自动修复任何试图走自己的路的东西，而不会产生更多的利润或填充