为什么margin-top不能与inline-block一起使用，而与inline一起使用？

小编典典

为什么margin-top不能与inline-block一起使用，而与inline一起使用？

html

在下面的代码中，我试图使h1元素具有最高利润。当我在css中将位置设置为inline时，未显示上边距。但是，当我将其更改为inline-block时，它确实可以。我想知道是否有人可以解释为什么会这样。谢谢。

这是我的HTML：

<!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>

这是CSS

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

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

阅读 390

2020-05-10

共1个答案

小编典典

CSS2规范的9.2.4节规定：

inline-block
此值使元素生成一个 内联级块容器 。内联块的内部被格式化为块框，元素本身被格式化为原子内联级别框。

内联
此值使元素生成一个或多个内联框。

在CSS2规范（第9.4.2节）中，我们进一步得知，内联元素仅考虑水平边距证明：

在内联格式设置上下文中，框从一个包含块的顶部开始以一个接一个的水平排列。这些框之间应注意水平边距，边框和填充。

inline和之间的区别在于，inline-block将inline元素视为内联，而将inline-block元素有效地视为块（在视觉上彼此内联）。

块级元素同时考虑水平和垂直边距，而行内元素仅考虑水平边距。

2020-05-10