内联块内直列块隐形保证金

Question

查看此笔中的示例和一个解决方案：https://codepen.io/MaxViewUp/pen/YrXzRG

我有一个内联的标题，将有宽度acording到文本宽度，和我有在其内部的:after（或div，如果你想）inline-block太宽和70%。我使用内联块，因为我有这个标题的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

在自己的行每行内或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

使用的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 4

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

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

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

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

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

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

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

 
* { 
 
\t font-family: sans-serif; 
 
\t font-weight: 300; 
 
\t 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 5

解决方案：https://codepen.io/anon/pen/oGXXmV

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

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

该解决方案使用em，所以它不会，即使你改变字体大小比24px其他东西改变相对于你的标题（强烈建议在一般使用em，更方便和适应）。

.main-title{ 
 
\t display: inline-block; 
 
\t background: #fc0; 
 
\t height: 1em; /* tweak this value to control the overall height */ 
 
\t 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 */ 
 
}