css内联块与表格单元格

Question

内联块和表格单元有什么区别？

我发现这两种风格是一样的。无论你的风格如何。 text-align: center; vertical-align: middle;等标识display: inline-block;或display: table-cell;也会有同样的效果。

请通知主要区别。

Answer 1

display: table-cell和display: inline-block;令人困惑，但它们之间存在巨大差异。 display: inline-block;不会像display: table-cell;那样表现，即当您的浏览器重新调整大小或内容超过其宽度而display: table-cell;赢了'时，内联块将表现为块级别吨。

您可以看到它们之间的差异 here

您还可以在应用display: inline-block;时找到阻止之间的差距通过按Ctrl键重新调整窗口大小并使用鼠标滚动按钮滚动来查看差异。

请注意vertical-align: middle;在display: table-cell;中display: inline-block;无效{{1}}。如果您有工作演示，请分享一个。

Answer 2

display:table-cell旨在display:table-row内部使用，display:table位于vertical-align内。使用不当将导致创建匿名元素，这可能会对布局的其他方面产生负面影响。

话虽如此，display:inline-block两者的含义却截然不同。在display:table-cell中，它指的是元素本身如何与周围元素对齐。另一方面，对于{{1}}，它将影响其中元素的垂直对齐。