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;不会.

你可以在这里看到它们之间的差异

当您display: inline-block;通过按Ctrl键重新调整窗口大小并使用鼠标滚动按钮滚动查看差异时,您还可以找到块之间的间隙.

注意vertical-align: middle;不工作为display: table-cell;在display: inline-block;.如果您有工作演示,请分享一个.

Answer 2

display:table-cell用于内部display:table-row,本身内部display:table.使用不当将导致创建匿名元素,这可能会对布局的其他方面产生负面影响.

话虽如此,vertical-align两者的含义却截然不同.在display:inline-block,它指的是元素本身如何与周围元素对齐.另一方面,display:table-cell它会影响其内部元素的垂直对齐.