Question

请参阅此笔以获取示例和一个解决方案：https://codepen.io/MaxViewUp/pen/YrXzRG

我有一个内联标题，其宽度取决于文字宽度，我内部有一个: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

.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伪元素的行高将从主标题类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 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伪元素受制于标题元素的文本大小调整属性。它只是在一个新行上，具有相同的行高和标题文本的其他属性。

如果您只是简单地减少标题的总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 */
}

Inline-Block Inlineible Margin内嵌块

5 个答案: