两个div或是img之间有空隙

今天在工作中遇到一个问题，在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 的盒模型都会有文字特性，间距就是由于两个标签之间的空白引起的。

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容