今天在工作中遇到一个问题，在img下面有一个div标签，怎么也删不掉那一条空隙，如图所示
image
代码
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{margin: 0;padding: 0}
.a1{
width: 100px;
height: 100px;
border: 1px solid #eee;
}
</style>
</head>
<body>
<img class="a1">
<img class="a1">
<div class="a1"></div>
</body>
</html>
解决方法
只需要加入font-size: 0; 这个属性就可以去除空隙了。
*{margin: 0;padding: 0;font-size: 0}
原因
img和div都是行内块级元素 ，
inline-block的盒模型都会有文字特性，间距就是由于两个标签之间的空白引起的。
网友评论