html - Inline-Block inside Inline-block Invisible margin

Question

有关示例和一种解决方案，请参阅此笔:https://codepen.io/MaxViewUp/pen/YrXzRG

我有一个内联标题，其宽度根据文本宽度而定，并且我在其中有一个 :after(如果需要，也可以是一个 div)和 inline-block 也是 70% 的宽度。我使用 inline-blocks 因为我有这个标题的 3 个变体(左、右和中)，所以我只需更改文本方向即可更改标题。

问题:inline-block 元素在文本中有一个奇怪的不可见“margin-top”。我想知道为什么会发生这种情况以及更好的解决方案。我认为这与 font-size(字体越大，间距越大)有关，但我不确定。

目前的解决方案:

• font-size: 0 - 不是一个好的解决方案，因为它会弄乱 HTML；
• display:block 或 float:left on the :after - 不是一个好的解决方案，因为文本对齐不会影响它；<

如果有人确切知道为什么会发生这种情况，请解释一下。

CSS 代码:

.main-title {
  display: inline-block;
  font-size: 24px;
}
.main-title:after {
  content: '';
  display: inline-block;
  width: 70%;
  height: 2px;
  background: green;
}
.main-title-wrapper {
  margin: 20px 0;
}
.main-title-wrapper.right {
  text-align: right;
}
.main-title-wrapper.center {
  text-align: center;
}

注意 我想解决这个问题，但我真正需要的是发生这种情况的原因(文档等)。感谢您的帮助。

Answer 1

每个内联或内联 block 元素在其自己的行上(如您的 :after)元素，将表现得像一行文本，因此受制于行高、垂直对齐和您在父级(24px)上设置的任何字体和字体大小的基线。

虽然它需要一个额外的元素，但您最初的示例解决方案是将文本包装在自己的元素中，将 0 字体大小应用于父元素，并将 24px 字体大小仅应用于文本元素(因此应用于第一个line only)，如果你不想求助于负边距或负行高等技巧，这是最好的解决方案。

这是应用于内联或内联 block 元素的排版 CSS 属性的摘要:https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align