CSS中Absolute Position与inherit display导致Li空行的解决方法

嘿，这个问题我之前排查过类似的情况！核心原因大概率是display: inherit带来的属性继承冲突，再加上浏览器给列表元素的默认样式搞的鬼。下面是几个不用修改你现有核心CSS（position: absolute和display: inherit）的解决方案：

• 重置

• 的默认内外边距
  浏览器会给<li>元素默认加上margin-top或者padding-top，这很可能就是空白行的来源。你可以针对性清除：

  li {
    margin-top: 0;
    padding-top: 0;
  }
  

  这个方法最直接，优先试试，很多时候一重置就解决了。

• 给.something的父容器设置font-size: 0
  如果.something继承了父元素的inline或inline-block display属性，那么inline元素之间的换行、空格会被解析成空白字符，看起来就是空白行。给父容器加font-size: 0可以消除这个间隙，记得在.something里还原你需要的字体大小：

  .something-parent { /* 这里替换成.something的实际父元素类名 */
    font-size: 0;
  }
  .something {
    font-size: 16px; /* 改成你实际需要的字号 */
  }
  

• 给.something添加vertical-align: top
  当元素是inline/inline-block类型时，默认的vertical-align对齐方式（比如baseline）可能会让元素下方或上方产生偏移，看起来像空白。加上这个属性就能修正对齐：

  .something {
    vertical-align: top;
  }
  

  这个改动最小，只调整当前元素的对齐状态。

• 排查

• 的伪元素干扰
  有时候项目里的全局CSS会给<li>加:before伪元素，哪怕是空的content也可能生成空白。你可以检查并清空：

  li:before {
    content: none;
  }
  

内容的提问来源于stack exchange，提问作者kabrice