Align text to top of line

Question

I have a div with text inside, with a line-height that is more than the height of the text. This means there is space on top and below each line of text.

There is a vertical border along the right hand side, the top of which I want to be aligned with the top of the text. I need to somehow align the text to the top of it's line.

Is this possible or can someone help me out here?

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

<div>Hello</div>

Possible duplicate of [align block elements on top when using line-height](http://stackoverflow.com/questions/4089379/align-block-elements-on-top-when-using-line-height) — James Jones, Dec 18 '16 at 11:06

score 3 · Accepted Answer · answered Sep 24 '13 at 13:29

Without messing with the line-height:

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;
}

The values top and bottom should equal (line-height - font-size) / 2 but due to different character height will need some manual nudging.

Demo: http://jsfiddle.net/NcbB7/

No problem sir, don't be a stranger! – mikedidthis Sep 24 '13 at 13:33 — mikedidthis, Sep 24 '13 at 13:33

Align text to top of line

1 Answers1