row-gap/column-gap在非Flex/Grid布局的作用及Chrome低版本支持疑问

MDN兼容性表格里的三行条目容易让人混淆，拆解一下实际逻辑：

• 「row-gap（Chrome 47）」仅代表浏览器能识别这个属性的语法，不会把它当成无效属性丢弃，但此时没有任何布局环境能让它生效——说白了就是写了等于白写，看不到任何效果。
• 直到Chrome 66，row-gap才真正开始在Grid布局中发挥作用；Chrome 84之后才扩展支持Flex布局。

你在常规文档流（Flow Layout）中测试的代码确实不会有效果，因为row-gap从设计之初就只针对Flex、Grid这类容器布局，不管哪个版本都不会在常规流里生效。

附上你的测试代码：

.parent{
  row-gap: 20px;
}

.child {
  height: 100px;
  background-color: red;
}

<div class="parent">
 <div class="child"></div>
 <div class="child"></div>
 <div class="child"></div>
</div>

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