为什么 Margin-Top 不能在内联元素上工作，但可以在内联块元素上工作？

内联与内联块：为什么 Margin-Top 只能与内联块一起使用

问题

使用 HTML 和 CSS 时，用户尝试为

创建上边距元素，但只有当 CSS 属性 display 设置为 inline-block 时才会出现，而设置为 inline 时不会出现。

说明

CSS 规范定义了 inline 和 inline-block 的区别如下：

• inline-block：创建内联级块容器其中元素的内部内容被格式化为块框，元素本身被格式化为内联级框。
• inline：生成一个或多个内联框。

至关重要的是，CSS2 规范规定内联元素仅考虑水平边距（例如， margin-left)。

区别

区别在于如何处理内联和内联块元素：

• 内联时元素被视为真正的内联元素，内联块元素被视为块，但在视觉上与一个元素内联另一个。
• 块级元素（如内联块）同时考虑水平和垂直边距，而内联元素仅考虑水平边距。

分辨率

因此，在提供的情况下，将显示设置为

上的内联元素仅应用水平边距，不包括顶部边距。但是，将显示设置为 inline-block 允许应用水平和垂直边距，包括顶部边距。

以上是为什么 Margin-Top 不能在内联元素上工作，但可以在内联块元素上工作？的详细内容。更多信息请关注PHP中文网其他相关文章！