小编典典

为什么margin-top不能与inline-block一起使用,而与inline一起使用?

html

在下面的代码中,我试图使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;
}

阅读 389

收藏
2020-05-10

共1个答案

小编典典

CSS2规范的9.2.4节规定:

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

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

在CSS2规范(第9.4.2节)中,我们进一步得知,内联元素仅考虑水平边距证明:

在内联格式设置上下文中,框从一个包含块的顶部开始以一个接一个的水平排列。这些框之间应注意水平边距,边框和填充。

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

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

2020-05-10