Question

在下面的代码中，我试图让h1元素具有上边距。当我将位置设置为在css中内联时，margin-top不会显示。但是，当我将其更改为内联块时，确实如此。我想知道是否有人可以解释为什么会这样。感谢。

编辑：这是jsfiddle中的代码：http://jsfiddle.net/pjPdE/

这是我的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;
}

Answer 1

CSS2规范的

Section 9.2.4声明：

<强>内联块
  此值使元素生成内联级块容器。内联块的内部被格式化为块框，元素本身被格式化为原子内联级框。

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

在CSS2规范（section 9.4.2）中，我们被告知内联元素仅尊重水平边距（proof）：

在内联格式化上下文中，框从水平排列，一个接一个，从包含块的顶部开始。这些框之间会考虑水平边距，边框和填充。

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

块级元素同时遵循水平和垂直边距，而内联级元素仅尊重水平边距。

Answer 2

<h1>标记默认为块元素，它允许边距。使用display: inline将其转换为内联元素，例如不允许边距的span标记。

使用display: inline-block可以使用这两个元素的两个功能。

将元素显示为内联级块容器。里面的此块被格式化为块级框，元素本身就是格式化为内联级别框

参考：w3schools

Answer 3

只有块级元素才能有边距。给它'显示：内联;迫使它（不出所料）成为内联元素，从而失去它的边缘。

如果您希望将内联与其他内容保持一致，请尝试使用内联块，并利用边距。。

为什么margin-top适用于内联块而不是内联？

3 个答案: