css中一些莫名的元素间距

最新推荐文章于 2022-12-27 17:49:49 发布

HzDoctor

最新推荐文章于 2022-12-27 17:49:49 发布

阅读量364

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_37918241/article/details/97814361

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

开发中会碰到类似的这样的问题

  <body>
    <div class="space">
      <a href="##">惆怅</a>
      <a href="##">淡定</a>
      <a href="##">热血</a>
  </div>
  <div class="img-list">
    <img src="./1.jpg" alt="" srcset="">
    <img src="./2.jpeg" alt="" srcset="">
    <img src="./3.jpg" alt="" srcset="">
  </div>
  </body>

在这里插入图片描述
发现：明明没有任何的margin，padding和border，但却总有莫名的边距，很烦
解决：

    <style>
        .space {
            font-size: 0;
        }
        .space a {
            font-size: 12px;
        } 

        .img-list{
          font-size: 0;
        }
        img{
          width: 200px;
        }
    </style>

  </head>
  <body>
    <div class="space">
      <a href="##">惆怅</a>
      <a href="##">淡定</a>
      <a href="##">热血</a>
  </div>
  <div class="img-list">
    <img src="./1.jpg" alt="" srcset="">
    <img src="./2.jpeg" alt="" srcset="">
    <img src="./3.jpg" alt="" srcset="">
  </div>
  </body>
</html>

在这里插入图片描述
总结：只需要在父元素加入 font-size: 0;即可

HzDoctor

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css中一些莫名的元素间距

开发中会碰到类似的这样的问题 <body> <div class="space"> <a href="##">惆怅</a> <a href="##">淡定</a> <a href="##">热血</a> </div> <div c...
复制链接

扫一扫

专栏目录