为什么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 ):

在内联格式化上下文中,框从一个包含块的顶部开始一个接一个地水平放置。 水平边距,边框和填充在这些方框之间。

inlineinline-block之间的区别在于inline inline元素被视为内联,而inline-block元素被有效地视为块(它们在视觉上彼此内联)。

块级元素既要考虑水平边界,又要考虑垂直边界,而内联级元素只考虑水平边界。

默认情况下, <h1>标签是允许使用边距的块元素 。 使用display: inline将其转换为内联元素,例如不允许使用边距的span标签。

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

将元素显示为内嵌级块容器。 该块的内部被格式化为块级框,并且该元素本身被格式化为内嵌级框

参考: w3schools

只有块级元素可以有边距。 给它显示:内联; 迫使它(不出所料)成为内联元素,从而失去了它的边际。

尝试使用内联块,如果你想保持内联与其他内容,并利用利润率。 。 。