为什么 `margin-top` 可以与 `inline-block` 一起使用，但不能与 `inline` 一起使用？-css教程-PHP中文网

为什么 `margin-top` 可以与 `inline-block` 一起使用，但不能与 `inline` 一起使用？

Mary-Kate Olsen

发布： 2024-11-27 10:10:10

原创

951 人浏览过

Why Does `margin-top` Work with `inline-block` but Not with `inline`?

为什么 Margin-Top 可以配合 Inline-Block 而不能配合 Inline

Web 开发中，理解 inline 和 inline-block 的区别对于塑造页面上元素的行为至关重要。这个问题试图澄清这两个显示属性之间的上边距应用的差异。

Inline 和 Inline-Block

CSS2 规范将 inline 定义为表示的值内联元素。这些元素显示为一条连续的线，没有中断。另一方面，内联块创建内联级块容器，这意味着这些元素的行为类似于内联格式中的块。如 CSS2 文档中所示：

Inline：“此值导致元素生成一个或多个内联框。”
Inline-block：“此值导致元素生成一个或多个内联框。”生成内联级块容器。内联块的内部被格式化为块框，并且元素本身被格式化为原子内联级。

边距

此外，CSS2 规范概述了内联元素的边距：

“在内联格式中在上下文中，框从包含块的顶部开始一个接一个地水平布局。这些框之间的填充受到尊重。”

这种区别解释了为什么 margin-top 不适用于内联元素。内联元素仅限于仅考虑水平边距，而像 inline-blocks 这样的块级元素同时考虑水平和垂直边距。

示例

考虑 HTML 和 CSS问题中提供：

<!DOCTYPE html>
<head>
  <link rel="stylesheet" type="text/css" href="MyFirstWebsite.css">
  <title>Max Pleaner's First Website</title>
</head>
<body>
  <h1>Welcome to my site.</h1>
</body>
</html>

登录后复制

body {
  background-image: url('sharks.jpg');
}

h1 {
  background-color: #1C0245;
  display: inline;
  padding: 6.5px 7.6px;
  margin-left: 100px;
  margin-top: 25px;
}

登录后复制

在这种情况下，h1 元素只会当显示属性设置为内联时，显示 100px 的水平边距。但是，如果将 display 属性更改为 inline-block，则将应用 25px 的 margin-top，因为 h1 元素将被视为内联上下文中的块级元素。

以上是为什么 `margin-top` 可以与 `inline-block` 一起使用，但不能与 `inline` 一起使用？的详细内容。更多信息请关注PHP中文网其他相关文章！