Question

I am trying to get a text character to touch the borer below it.

I have no margin and no padding, but there is a gap because the font characters themselves seem to have space below the characters.

I tried to reduce the line-height, but this cuts of the top of the characters. I would like to cut off the bottom of the characters instead. Is this possible?

Answer 1

The space below baseline is called descent in the typographic world. Unfortunately you cannot adjust this using CSS.

What you can do is to place your string inside a div. In the CSS set the height you wish, and set overflow:hidden;

Demo here

<div class="cutter">
    This a test string
</div>

CSS:

.cutter {
    display:block;
    font-size:24px;
    height:20px;
    overflow:hidden;
}

The result:

As Dai points out in the comment, you can also place and positioning the text in a parent container and then apply a negative bottom margin.