理由：両方のボックスが表示されるように設定されている場合：インラインブロック、2つのボックスの間にギャップがある場合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1{
display: inline-block;
width: 200px;
height: 150px;
border: 1px solid #000;
background-color: blue;
}
.box2{
display: inline-block;
width: 200px;
height: 150px;
border: 1px solid #000;
background-color: #096;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
解決;
方法1：本体と親divを設定してfont-size：0を設定します。
方法2：imgの垂直方向の配置を設定します; v-align：bottom;
方法3：ブロックにimgを設定します;表示：ブロック;
方法4：外側のdivの行の高さを設定します; line-heightは0pxです
方法5：息子は義理の父親であり、親：位置：相対;
子：位置：絶対; top：0;