当前位置: 首页 > 面试题库 >

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

万修为
2023-03-14
问题内容

在下面的代码中,我试图使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-blockinline元素视为内联,而将inline-block元素有效地视为块(在视觉上彼此内联)。

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



 类似资料:
  • 问题内容: 在下面的代码中,我试图使h1元素具有最高利润。当我在CSS中将位置设置为内联时,没有显示页边距顶部。但是,当我将其更改为inline-block时,它确实可以。我想知道是否有人可以解释为什么会这样。谢谢。 这是我的HTML: 这是CSS 问题答案: CSS2规范的9.2.4节)规定: inline-block 此值使元素生成一个 内联级块容器 。内联块的内部被格式化为块框,元素本身被格

  • 问题内容: 只是一个让我烦恼的快速问题:为什么要集中精力 确实可以 但当显示设置为 谢谢答案 问题答案: 我的理解如下(尽管我很高兴得到纠正)。 内联元素不具有width属性,因此 无法 计算“自动” 。 块元素具有width属性,因此 可以 计算“自动”的宽度。 内联块元素的外部充当内联,但内部充当块。这样,宽度集的作用类似于内联元素中单词的宽度。

  • 问题内容: 我有一个带display元素:inline-block,但是它似乎不接受margin-top。这是因为该元素仍被视为内联元素吗? 如果是,是否有人可以解决? 编辑#1 : 我的CSS很简单: 我最终将内容包装在另一个div中,并给了它一个空白。但这会导致很多额外的标记,并使我的代码不太清楚。 编辑#2 : &on 元素似乎只适用于正值。 问题答案: 我用过。它具有inline- blo

  • 问题内容: 我已经在端口8080(默认)下启动并测试了Tomcat。现在,我将连接器端口更改为80,然后重新启动了Tomcat,在最小的Debian 6.0安装中没有任何显示。现在,这里的窍门在哪里? 问题答案: 转到/ etc / default / tomcat6并更改为

  • 问题内容: 我正在使用ApplicationTestCase测试一个Android应用程序。我想模拟我的AsyncTasks之一(示例简化为显示问题): 因此,为了设置测试,我做了以下工作: 然后,实际测试如下: 但是运行时出现异常: 为什么模拟AsyncTask的技术不起作用? 请注意,在这种简单情况下,删除会导致问题消失,但是对于我的实际测试,我确实需要创建应用程序。 问题答案: AsyncT

  • 问题内容: 我已经在端口8080(默认)下启动并测试了Tomcat。现在,我将连接器端口更改为80,并重新启动了Tomcat,在最小的Debian 6.0安装中没有任何显示。现在,这里的窍门在哪里? 问题答案: 转到/ etc / default / tomcat6并更改为