banner图与底下的div之间存在一条缝隙的解决办法

最新推荐文章于 2022-11-24 11:46:34 发布

yx_cos

最新推荐文章于 2022-11-24 11:46:34 发布

阅读量1.7k

点赞数 2

分类专栏： html 文章标签： img标签

本文链接：https://blog.csdn.net/yx_cos/article/details/78390797

版权

html 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在写页面的时候遇到了一个奇怪的问题，就是banner图与下面的div之间存在着缝隙，不存在margin，padding，可是就是有一条缝隙，如下图：
这里写图片描述

页面代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/css.css" />
    <style>
        *{margin: 0;padding: 0;border: 0;}
        .banner,.banner img{width: 100%;height: auto;}  
        .content{width: 100%;height: 100px;background:#000;color: #fff;}
    </style>
</head>
    <body>
        <div class="banner"><img src="images/1.jpg"/></div>
        <div class="content">content与banner之间存在了一条间距</div>
    </body>
</html>

刚开始想到的解决方法是，给下面的div写个margin-top：-4px;来消除了间隙，可是还是没有找到产生这个问题的原因

后来发现是因为标签本身的问题，将img 改变一下属性设为display：block ，间隙就不见了
如下图
这里写图片描述

yx_cos

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
banner图与底下的div之间存在一条缝隙的解决办法

在写页面的时候遇到了一个奇怪的问题，就是banner图与下面的div之间存在着缝隙，不存在margin，padding，可是就是有一条缝隙，如下图：页面代码：<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css"
复制链接

扫一扫

专栏目录