为什么margin-top与inline-block一起工作，而不是inline？
在下面的代码中，我试图让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; }
CSS2规范第9.2.4节规定：
内联块
该值会导致元素生成行内级块容器 。 内联块的内部被格式化为块框，并且该元素本身被格式化为primefaces内联级别框。一致
该值使元素生成一个或多个行内框。
在CSS2规范（ 第9.4.2节 ）中，我们被告知内联元素只考虑水平边界（ certificate ）：
在内联格式化上下文中，框从一个包含块的顶部开始一个接一个地水平放置。 水平边距，边框和填充在这些方框之间。
inline和inline-block之间的区别在于inline inline元素被视为内联，而inline-block元素被有效地视为块（它们在视觉上彼此内联）。
块级元素既要考虑水平边界，又要考虑垂直边界，而内联级元素只考虑水平边界。
默认情况下， <h1>标签是允许使用边距的块元素 。 使用display: inline将其转换为内联元素，例如不允许使用边距的span标签。
使用display: inline-block可以使用这两个元素的两个特征。
将元素显示为内嵌级块容器。 该块的内部被格式化为块级框，并且该元素本身被格式化为内嵌级框
参考： w3schools
只有块级元素可以有边距。 给它显示：内联; 迫使它（不出所料）成为内联元素，从而失去了它的边际。
尝试使用内联块，如果你想保持内联与其他内容，并利用利润率。 。 。
