css 去除相邻元素行内块元素display inlineblock中的间隙

最新推荐文章于 2022-12-06 21:00:00 发布

rgpbrave

最新推荐文章于 2022-12-06 21:00:00 发布

阅读量304

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/rgpbrave/article/details/113875929

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

倆个行内快元素在一行时会出现间隙，例如

<style>
  .aa{
    display: inline-block;
    background-color: red;
    color: green;
    font-size: 14px;
  }
</style>
<body>
  <div class="aa">行内快</div>
  <div class="aa">间隙</div>
  <div>
    <input type="text">
    <input type="text">
  </div>
</body>

在这里插入图片描述
去除他们之间的间隙我这里提供俩个实用方法
1.在父级元素设置 font-size 0 （常用）
2.把俩个行内快元素标签紧紧挨着不要有换行空格等
例如上边的例子

<style>
  body{
    font-size: 0;//1.父元素设置font-size  0 
  }
  .aa{
    display: inline-block;
    background-color: red;
    color: green;
    font-size: 14px;
  }
</style>
<body>
  <div class="aa">行内快</div>
  <div class="aa">间隙</div>
  <div>
    <input type="text"><input type="text">//2.倆个元素紧紧相邻
  </div>
</body>