html - 在 CSS 中处理行内 block 网格和字体大小的可维护方法

Question

当使用行内 block 元素时，元素周围的空白确实会影响将其用于网格元素。由于空白，两个 50% 的元素不能并排放置。

最好的解决方案是做类似的事情:

    .column {
        display: inline-block;
        vertical-align: top; 
    }

    .grid {
        font-size: 0;

        > * {
            font-size: initial;
        }
    }

    <div class="grid">
        <div class="column w50"></div>
        <div class="column w50"></div>
    </div>

然而，这会导致字体大小发生变化(当使用 ems 调整字体大小时)并且那些星号选择器有点不受欢迎。

删除 HTML 中的空格并不是一个真正的选择，它会影响可维护性，因为其他开发人员需要知道以确保删除空格并且它不那么可读。评论技巧也是如此。

在理想情况下，我只使用 flex，但 IE9 仍然是个问题。

如果我能做一些不改变子元素字体大小的事情，我就可以克服星号选择器。

编辑:我知道有一个关于如何处理空白的类似问题，但这是专门关于解决字体大小问题的方法。修复空白有一些技巧，但上面的可能是最好的，因为它不像评论/负边距那样笨拙。

Answer 1

虽然您正在使用 font-size:0 方法来处理 inline-block 间隙并且因为您担心 font-size:由于使用 ems， child 的初始:

However that causes things to change type size (when sizing type with ems) and those star selectors are a little frowned upon.

---

您可以使用 rem 来“解决”这个问题。

在下面查看 rem、em 和 px 之间的区别:

Comprehensive Guide: When to Use Em vs. Rem

Confused About REM and EM?

While em is relative to the font size of its direct or nearest parent, rem is only relative to the HTML (root) font-size