html - css 内联 block 与表格单元格

Question

行内 block 和表格单元格有什么区别？

我发现这两种风格是一样的。无论您喜欢什么风格，例如。 文本对齐:居中； vertical-align: middle; 等通过识别 display: inline-block; 或 display: table-cell; 将工作相同。

请告知关键差异。

Answer 1

display: table-cell 和 display: inline-block; 一样令人困惑，但它们之间存在巨大差异。 display: inline-block; 不会像 display: table-cell; 那样表现，即当你的浏览器尺寸变大时，inline-block 会像 block 级一样表现或者如果您的内容超过其宽度，而 display: table-cell; 则不会。

可以看出它们之间的区别 here

当您应用 display: inline-block; 调整窗口大小时，您还会发现 block 之间的间隙，方法是按 Ctrl 键并使用鼠标滚动按钮滚动以查看差异。

请注意 vertical-align: middle; 并不像 display: inline-block; 中的 display: table-cell; 那样工作。如果您有工作演示，请分享一个。