12

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

编辑：这是 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;
}
4

3 回答 3

17

CSS2 规范的第 9.2.4 节规定：

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

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

进一步在 CSS2 规范（第 9.4.2 节）中，我们被告知内联元素只尊重水平边距（证明）：

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

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

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

于 2013-10-03T07:56:24.640 回答
5

默认情况下，<h1>标签是一个允许边距的块元素。使用display: inline将它变成一个内联元素，例如不允许边距的 span 标签。

Usingdisplay: inline-block允许您同时使用这两个元素的两个特性。

将元素显示为内联级块容器。这个块的内部被格式化为块级框，元素本身被格式化为行内级框

参考：w3schools

于 2013-10-03T07:50:47.770 回答
2

只有块级元素可以有边距。给它 'display: inline; 迫使它（毫不奇怪）成为一个内联元素，从而失去它的利润。

如果您想让它与其他内容保持内联并利用边距，请尝试使用 inline-block 。. .

于 2013-10-03T07:50:30.577 回答