首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >内联-内嵌块-块不可见边缘

内联-内嵌块-块不可见边缘
EN

Stack Overflow用户
提问于 2017-09-14 19:18:06
回答 5查看 2.4K关注 0票数 3

参见这支笔的一个例子和一个解决方案:https://codepen.io/MaxViewUp/pen/YrXzRG

我有一个内联标题,它的宽度将与文本宽度相关联,并且我在其中有一个:after (如果您愿意,也有一个div ),其中还有inline-block和宽度70%。我使用内联块,因为我有三个变体的标题(左,右,中),所以我只是改变文本的方向,以改变标题。

问题: inline-block元素在文本中有一个奇怪的不可见的“边距顶”。我想知道为什么会发生这种情况,以及一个更好的解决办法。我认为这与font-size有关(字体更大,间距更大),但我不确定。

到目前为止的解决办法:

  • font-size: 0 --不是一个很好的解决方案,因为它会破坏HTML;
  • display:blockfloat:left on :after -不是一个好的解决方案,因为文本对齐不会影响它;

如果有人确切知道为什么会这样,请解释一下。

CSS代码:

代码语言:javascript
运行
复制
.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;
}

注意:我想解决这个问题,但我真的需要的是发生这种情况的原因(文档等)。谢谢你的帮助。

EN

回答 5

Stack Overflow用户

回答已采纳

发布于 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

票数 1
EN

Stack Overflow用户

发布于 2017-09-14 19:22:46

代码语言:javascript
运行
复制
.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: relativeposition:absolute怎么样?

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

票数 1
EN

Stack Overflow用户

发布于 2017-09-14 19:24:42

用线高达到预期效果

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

代码语言:javascript
运行
复制
.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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/46226716

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档