Question

＆＃13;

a:link,
a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover,
a:active {
  background-color: red;
}

＆＃13;

<a href="default.asp" target="_blank">This is a link</a>

＆＃13;

在上面的代码中，如果我设置＆＃34;显示＆＃34; to＆＃34; inline＆＃34;该链接被推向上行。为什么会这样？

Answer 1

块级元素垂直对齐，具体取决于框的上侧。内联级元素相对于文本基线垂直对齐。这就是为什么对于块级元素，您的顶部填充被考虑在内，但不适用于内联级元素。

我建议您阅读box model in the spec。

a:link,
a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover,
a:active {
  background-color: red;
}

<a href="default.asp" target="_blank">This is a link</a>

Answer 2

首先，您的问题不是Why is this inline-block element pushed downward?的重复，此处的答案（与该问题不同）与垂直对齐无关。也不会学习＆＃34;第8节盒子模型＆＃34; CSS 2.2规范启发你。

要了解这里发生的事情，您需要了解高度。块容器的高度和线盒的高度，以及它们如何相互作用。

块容器，其中包括display:block和display:inline-block个元素的高度，它的块级别框子项的高度总和，如果有，或者否则，它的一叠线框的线高的总和。

对于您的示例，<body>元素（display:block块容器仅包含内联级子级，无论<a>元素是否为{{1} }或display:inline所以它的高度是行框总和的高度。此外，除非视口非常窄，否则我们可以通过假设display:inline-block元素中的所有文本都适合一行来进一步简化事物，因此<a>元素的高度是高度它包含的唯一的行框。我们有这个：

您注意到我还没有描述上面<body>元素的边界。这是因为它的展示位置取决于它是<a>还是display:inline。

我们现在需要了解如何根据内容计算行高。对于display:inline-block元素，我们在规范的10.6.1 Inline, non-replaced elements部分中有这个。

内容区域的高度应该基于字体，但是这样规范没有具体说明。 UA可以例如使用em-box或字体的最大上升和下降。

和

内联未更换框的垂直填充，边框和边距从内容区域的顶部和底部开始，无关使用＆＃39;行高＆＃39;。但只有＆＃39;行高＆＃39;用的时候计算线框的高度。

将它们放在一起，这意味着在这种情况下线框的高度是文本的高度，而你所拥有的填充：display:inline不会影响高度padding: 14px 25px;元素为<a>时的行框。如果它不影响线框的高度，那么它也不会影响display:inline元素的高度。但是文本的背景和填充仍然被绘制。所以我们有这个：

<body>不同。这里10.6.6 Complicated cases规范说：

对于＆＃39; inline-block＆＃39;元素，计算时使用边距框线框的高度。

因此，行框包含整个内联块元素，不仅包括内容，还包括填充，边框和边距。在这种情况下，我们有

我们可以看到我们是否将它们放在一起，display:inline-block的文本低于display:inline-block的文本。

Answer 3

简而言之：

内联元素在其之前或之后没有换行符，并且它允许旁边的HTML元素。



块元素在其上方和下方都有一些空格，并且不允许其旁边的任何HTML元素。


内联块元素被放置为内联元素（与相邻内容在同一行上），但它表现为块元素。

请仔细阅读article以获取更多见解。

在这种情况下，您最好使用display: inline-block。

＆＃13;

a:link,
a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover,
a:active {
  background-color: red;
}

＆＃13;

<a href="default.asp" target="_blank">This is a link</a>

＆＃13;

显示：块，内联和内联块如何工作？

3 个答案: