使用display: inline-block的一些bug

最新推荐文章于 2023-07-06 10:42:52 发布

原创最新推荐文章于 2023-07-06 10:42:52 发布 · 395 阅读

0 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

4 篇文章

订阅专栏

本文解决inline-block元素下方和右侧出现多余空白的问题，通过调整父级元素的font-size属性，实现布局优化。

最近发现对于一些元素使用display：inline-block的时候，元素底下和右边会多出一些空白区域来占位置，如下图。由于项目时间紧张，临时换了其他处理方式，趁着今天有点时间就研究了一下。

<div class="box">
  <span class="item red"></span>
  <span class="item red"></span>
  <span class="item yellow"></span>
</div>

css代码：

* {
      margin: 0;
      padding: 0;
    }
    .box {
      margin: 0 auto;
      width: 1200px;
      height: 200px;
    }
    .item {
      display: inline-block;
      width: 50%;
      height: 100px;
      text-align: left;
    }
    .red {
      background: red
    }
    .yellow {
      background: yellow
    }