如何在容器的边框处对齐文本

Question

我不知道这是否可以轻松实现，但是有一种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?
}

JS-Fiddle

---

目前，它看起来像这样

但它看起来应该是这样的

或者像这样（line-height = minimum？）

---

我怎样才能做到这一点？

Answer 1

这是随机的，因为它取决于你的字体的比例，但你可以尝试这样的事情：

h1 {line-height: .9;}

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

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

border-bottom: 20px solid orange;

Answer 2

尝试以下亲爱的

 div {
            background:orange;
        }
        h1 {

            position:relative;
            top:-8px;
        }