在下面的代码中,我试图使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; }
CSS2规范的9.2.4节规定:
inline-block 此值使元素生成一个 内联级块容器 。内联块的内部被格式化为块框,元素本身被格式化为原子内联级别框。
内联 此值使元素生成一个或多个内联框。
在CSS2规范(第9.4.2节)中,我们进一步得知,内联元素仅考虑水平边距证明:
在内联格式设置上下文中,框从一个包含块的顶部开始以一个接一个的水平排列。这些框之间应注意水平边距,边框和填充。
inline和之间的区别在于,inline-block将inline元素视为内联,而将inline-block元素有效地视为块(在视觉上彼此内联)。
inline
inline-block
块级元素同时考虑水平和垂直边距,而行内元素仅考虑水平边距。