Inline-Block inside Inline-block 不可见边距

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；
• :after 上的 display:block 或 float:left - 不是一个好的解决方案，因为文本对齐不会影响它；

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

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

每个 inline 或 inline-block 元素在其自己的行（如您的 :after）元素上的行为就像一行文本，因此受制于任何字体和字体的行高、垂直对齐和基线-您在父级上设置的大小（24px）。

虽然它需要一个额外的元素，但您最初的示例解决方案是将文本包装在自己的元素中，将 0 字体大小应用于父元素，并将 24px 字体大小仅应用于文本元素（因此首先应用于仅行），如果您不想诉诸诸如负边距或负行高之类的技巧，这是最好的解决方案。

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

Answer 2

.main-title{
    display: inline-block;
    position: relative;
    font-size: 24px;
        &:after{
            content: '';
            position: absolute;
            bottom: 0px;
            left: 0px;
            display: inline-block;
            width: 70%;
            height: 2px;
            background: green;
        }
}

使用position: relative 和position:absolute 怎么样？

https://codepen.io/anon/pen/QqbwbJ

Answer 3

您可以将inline-flex 与flex-direction: column 一起使用

.main-title {
	display: inline-flex;
	font-size: 24px;
	flex-direction: column;
}
.main-title:after {
	content: '';
	width: 70%;
	height: 2px;
	background: green;
}
.main-title.expected {
	font-size: 0;
}
.main-title.expected > div {
	font-size: 24px;
}

.main-title-wrapper {
	margin: 20px 0;
}

.main-title-wrapper.right {
  text-align: right;
}

.main-title-wrapper.right .main-title {
	align-items: flex-end;
}

.main-title-wrapper.center .main-title {
	align-items: center;;
}

.main-title-wrapper.center {
  text-align: center;
}

* {
	font-family: sans-serif;
	font-weight: 300;
	box-sizing: border-box;
}

CSS problem:

<div class="main-title-wrapper">
 <div class="main-title">Normal</div>
</div>

<div class="main-title-wrapper">
 <div class="main-title">Normal - An Large text...</div>
</div>

<div class="main-title-wrapper right">
 <div class="main-title">Right - Lorem ipsum</div>
</div>

<div class="main-title-wrapper center">
 <div class="main-title">Center - Lorem ipsum</div>
</div>

<div class="main-title-wrapper">
 <div class="main-title expected">
  <div>This is what i expected:</div>
 </div>
</div>

Answer 4

使用 line-height 达到预期效果

https://codepen.io/nagasai/pen/jGPEbX

.main-title{
    line-height: 7px;
    display: inline-block;
    font-size: 24px;
}

::after 伪元素的行高将从主标题类 div 继承
请查看这篇文章以供参考 - http://www.testmycss.com/tips-and-tricks/css-before-pseudo-element-line-height/ 和 https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

Answer 5

使用相对定位并提供更大间距控制的解决方案：https://codepen.io/anon/pen/oGXXmV

根据inline-block 的定义，您的:after 伪元素受制于与您的标题元素一致的文本大小属性。它只是在一个新行上，具有与标题文本相同的行高和其他属性。

如果您只是减少标题的整体line-height，正如其他答案所建议的那样，您实际上只是将两行压缩到一行的空间中。这没有什么特别的问题，但可能会产生其他意想不到的副作用。

此解决方案使用em，因此即使您将字体大小更改为24px 以外的其他值，它也不会相对于您的标题发生变化（强烈建议通常使用em，更易于访问和适应）。

.main-title{
	display: inline-block;
	background: #fc0;
	height: 1em; /* tweak this value to control the overall height */
	font-size: 24px;
}
.main-title:after{
  content: '';
  display: inline-block;
  width: 70%;
  height: 2px;
  background: green;
  position: relative;
  top: -.85em; /* tweak this value to control distance of line below text */
}