Inline-Block 里面 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;
display:block 或 float:left 在 :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

.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 2

使用line-height达到预期结果

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

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

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

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

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

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

这是印刷 CSS 属性的摘要，因为它们适用于内联或内联块元素：https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

Answer 5

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

根据 inline-block 的定义，您的 :after pseudo-element 受标题元素统一的文本大小属性约束。它只是换行，具有与标题文本相同的 line-height 和其他属性。

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

此解决方案使用 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 */
}

Inline-Block 里面 Inline-block 隐形边距

Inline-Block inside Inline-block Invisible Margin

html

css

font-size

display