参见这支笔的一个例子和一个解决方案:https://codepen.io/MaxViewUp/pen/YrXzRG
我有一个内联标题,它的宽度将与文本宽度相关联,并且我在其中有一个:after
(如果您愿意,也有一个div
),其中还有inline-block
和宽度70%
。我使用内联块,因为我有三个变体的标题(左,右,中),所以我只是改变文本的方向,以改变标题。
问题: inline-block
元素在文本中有一个奇怪的不可见的“边距顶”。我想知道为什么会发生这种情况,以及一个更好的解决办法。我认为这与font-size
有关(字体更大,间距更大),但我不确定。
到目前为止的解决办法:
font-size: 0
--不是一个很好的解决方案,因为它会破坏HTML;display:block
或float:left
on :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;
}
注意:我想解决这个问题,但我真的需要的是发生这种情况的原因(文档等)。谢谢你的帮助。
发布于 2017-09-14 19:40:34
每个内联或内联块元素在其自己的行(如您的:after
)元素上,将表现为文本行,因此,受您在父元素上设置的字体和字体大小(24 or )的行高、垂直对齐和基线的影响。
虽然它需要额外的元素,但是您的初始示例解决方案是:将文本包装在自己的元素中,将0字体大小应用于父元素,并将24 as字体大小仅应用于文本元素(因此仅适用于第一行),这是最好的解决方案,如果您不想使用诸如负边距或负行高之类的黑客操作。
这是排版CSS属性的总结,因为它们适用于内联或内联块元素:https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align。
发布于 2017-09-14 19:22:46
.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
怎么样?
发布于 2017-09-14 19:24:42
用线高达到预期效果
https://codepen.io/nagasai/pen/jGPEbX
.main-title{
line-height: 7px;
display: inline-block;
font-size: 24px;
}
伪元素将从主标题类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
https://stackoverflow.com/questions/46226716
复制相似问题