vertical-alignment - 将文本对齐到行首

Question

我有一个包含文本的 div，line-height 大于文本的高度。这意味着每行文本的顶部和下方都有空间。

右侧有一个垂直边框，我希望其顶部与文本顶部对齐。我需要以某种方式将文本与其行的顶部对齐。

这可能吗？有人可以帮我吗？

div{
    border-left: 1px solid black;
    line-height: 30px;
}

<div>Hello</div>

Answer 1

不影响行高:

div{
    position: relative;
    font-size: 16px;
    line-height: 24px;
    width: 25px;
    padding: 0px 0px 0px 10px;
}
div:before {
    position: absolute;
    content: '';
    top: 6px;
    left: 0px;
    bottom: 6px;
    width: 0px;
    border-left: 1px solid black;
}

值 top 和 bottom 应该等于 (line-height - font-size)/2 但由于不同的字符高度将需要一些手动微调。

演示: http://jsfiddle.net/NcbB7/