如何在容器的边界对齐文本答案

【问题标题】：How to align text at the border of a container如何在容器的边界对齐文本
【发布时间】：2014-06-02 16:30:39
【问题描述】：

我不知道这是否容易实现，但是否有 CSS 样式可以将最高字符的顶部与其容器的边框对齐？

HTML

<div><h1>The "T" of this h1 needs to align top (touch the border)</h1></div>

CSS

div {
    background:orange;
}
h1 {
    vertical-align:top; //does not seem to work?
}

目前，它看起来像这样

但它应该看起来像这样

或者像这样 (line-height = minimum?)

我怎样才能做到这一点？

【问题讨论】：

这并不完全可以作为直接解决方案，但我认为这是可以接受的 jsfiddle.net/viphalongpro/Gem9A/2
是的，就像我通常“解决”它一样，但我正在寻找一种更清洁的方式，如果您更改字体/大小等不需要维护
你试过改变字体大小吗？如果您更改字体大小，它几乎可以很好地工作，我必须在这里说几乎，这就是我说不完全的原因。
是的，如果没有“官方”的方式来实现这一点，我想我会坚持使用这个解决方案。但是，我想知道0.21em 这个值是如何产生的。从理论上讲，它可能是特定于浏览器的，对吧？如果我合理地看待它，它应该可以通过 CSS（设置为 0）进行调整。
是否可以最小化/删除line-height？

【解决方案1】：

这有点随机，因为它取决于你的字体比例，但你可以试试这样：

h1 {line-height: .9;}

调整行高值以适应字体。例如。 line-height: 32px; font-size: 38px;，或line-height: 0.9em; font-size: 2em;等

如果底部没有足够的橙色，您可以随时添加一些底部边框：

border-bottom: 20px solid orange;

【讨论】：

【解决方案2】：

亲爱的试试下面

 div {
            background:orange;
        }
        h1 {

            position:relative;
            top:-8px;
        }

【讨论】：