原因:当两个盒子都设置了display:inline-block;时候,两个盒子产生之间产生了间距
<!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>
解决方法;
方法一:设置body 、父级div设置 font-size:0;
方法二:设置img的竖直对齐方式; v-align:bottom;
方法三:将img设置为block; display:block;
方法四:设置外层div的行高; line-height 为0px
方法五: 子绝父相法 父级:position:relative;
子级:position:absolute;top:0;