将文本对齐到行顶部

Question

我的文字里面有一个div，line-height超过了文本的高度。这意味着每行文本的顶部和下方都有空格。

右侧有一个垂直边框，我想在其顶部与文字顶部对齐。我需要以某种方式将文本对齐到它的顶部。

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

fiddle

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/