网格项内容的基线是如何确定的？

Question

这真的让我很困惑。请看下面的两个演示：

<div style="display: grid; align-items: baseline; gap: 10px; grid-template-columns: 160px minmax(100px, 200px) auto;">
  <div style="grid-column-start: 1;">
    <span>
        First row name
      </span>
  </div>
  <div style="grid-column: 2 / 4;">
    <div>
      <button style="height:30px">
              First row description
        </button>
    </div>
  </div>
  <div style="grid-column-start: 1;">
    <span>
        First row description
    </span>
  </div>
  <div style="grid-column: 2 / 4;">
    <div>
      <span style="display:inline-block;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m
      </span>
    </div>
  </div>
</div>

https://jsfiddle.net/8m2cujvg/

<div style="display: grid; align-items: baseline; gap: 10px; grid-template-columns: 160px minmax(100px, 200px) auto;">
  <div style="grid-column-start: 1;">
    <span>
        First row name
      </span>
  </div>
  <div style="grid-column: 2 / 4;">
    <div>
      <button style="height:30px">
              First row description
        </button>
    </div>
  </div>
  <div style="grid-column-start: 1;">
    <span>
        First row description
    </span>
  </div>
  <div style="grid-column: 2 / 4;">
    <div>
      <span>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m
      </span>
    </div>
  </div>
</div>

https://jsfiddle.net/8m2cujvg/1/

您可以看到第一个存在文本对齐问题。我尝试查看文档：https://drafts.csswg.org/css-align/#alignment-baseline，但很难看到块和内联块之间的任何区别。

Answer 1

“我很难看出块和内联块之间有什么区别。”

不同之处在于内联级元素激活vertical-align 属性。

因此，在您使用display: inline-block 的范围内，默认情况下会应用vertical-align: baseline 规则。这会将 span 的内容设置为父级的基线。

vertical-align 属性对块级元素没有影响。

vertical-align CSS 属性设置内联的垂直对齐方式， 内联块或表格单元框。 ~MDN

解决方案是覆盖默认值。将此添加到您的代码中：

span {
  display: inline-block;
  vertical-align: top; /* new */
}

<div style="display: grid; align-items: baseline; gap: 10px; grid-template-columns: 160px minmax(100px, 200px) auto;">
  <div style="grid-column-start: 1;">
    <span>
        First row name
      </span>
  </div>
  <div style="grid-column: 2 / 4;">
    <div>
      <button style="height:30px">
              First row description
        </button>
    </div>
  </div>
  <div style="grid-column-start: 1;">
    <span>
        First row description
    </span>
  </div>
  <div style="grid-column: 2 / 4;">
    <div>
      <span style="display:inline-block; vertical-align: top;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean m
      </span>
    </div>
  </div>
</div>

Answer 2

您会感到惊讶，但您似乎在基于 Chromium 的浏览器（Chrome 和 Edge）中发现了一个错误，因为您的输出在 Firefox 中的行为相同。

这在逻辑上是一个错误，因为无论对齐方式如何，输出都不应该产生重叠或溢出，尤其是您没有指定任何明确的高度或任何模板行，所以这绝对是一个错误。