将 span 内的文本与容器顶部对齐
Posted
技术标签:
【中文标题】将 span 内的文本与容器顶部对齐【英文标题】：Align text inside span to top of container 【发布时间】：2017-07-02 04:36:09 【问题描述】：有没有办法让文本从其跨度的最高边界开始？
在这里，您可以看到由于行高而产生的一些“填充”。 有没有办法做到这一点？
.name
display: inline-block;
line-height: 1.25;
font-size: 45px;
.firstname
display: block;
background: #FFAACC;
margin-bottom: 5px;
<div>
<div class="ej ej1">
<span class="name">
<span class="firstname">Something Name</span>
<span class="username">
@somthig-name
</span>
</span>
</div>
</div>【问题讨论】：
【参考方案1】：不确定您所说的“由于行高而导致的小“填充”是什么意思。 这是我对这个谜题的看法。
body
margin:0;
padding:0;
.name
margin-top:-0.9rem;
display: inline-block;
line-height: 1.25;
font-size: 45px;
.firstname
display: block;
background: #FFAACC;
margin-bottom: 5px;
<div>
<div class="ej ej1">
<span class="name">
<span class="firstname">Something Name</span>
<span class="username">
@somthig-name
</span>
</span>
</div>
</div>【讨论】：
【参考方案2】：只有手动更改每个 html 标签的 line-height 才能实现您的要求。我想这正是您正在寻找的东西..
.name
display: inline-block;
line-height: 33px;
font-size: 45px;
.firstname
display: block;
background: #FFAACC;
margin-bottom: 5px;
padding-bottom:10px;
margin-top:10px;
<body style="margin:0px;">
<div>
<div class="ej ej1">
<span class="name">
<span class="firstname">Something Name</span>
<span class="username">
@somthig-name
</span>
</span>
</div>
</div>
</body>【讨论】：
【参考方案3】：我认为问题在于<body> 的边距为 8px...
试试这个
.name
display: inline-block;
line-height: 1.25;
font-size: 45px;
.firstname
display: block;
background: #FFAACC;
margin-bottom: 5px;
<body style="margin:0px;">
<div>
<div class="ej ej1">
<span class="name">
<span class="firstname">Something Name</span>
<span class="username">
@somthig-name
</span>
</span>
</div>
</div>
</body>【讨论】：
否则，如果您谈论的是文本本身，我相信这与字体本身有关，您必须创建一个字符上方绝对没有空格的字体。以上是关于将 span 内的文本与容器顶部对齐的主要内容，如果未能解决你的问题，请参考以下文章