Adjusting space between link and underline below minimum

Question

I'm having difficulties getting the right space between the links and underlines (Vingårde, Dyrkning, Filosofi, Butik). See example below:

http://itu.dk/people/mbul/humlum/

It's as if there is a minimum of how close the underline can get to the text. I've tried different things, there among padding-bottom, but I can't get it to work.

I've customized a jfiddle (http://jsfiddle.net/kHZbH/135/) I found so you can see what I mean. I've set the padding-bottom to -200px but the underline just won't get any closer to the text.

<p>This is some example text. From this page, you can <a href="#">read more example text</a>, or you can <a href="#" id="custom">visit the bookshop</a> to read example text later.</p>

#custom {
    font-size: 50px;
    border-bottom: 4px solid blue; /* Or whatever color you want */
    padding-bottom: -200px;
    text-decoration: none;
    color: red;
}

The strange thing is that if you take a closer look at the normal link in the jfiddle the underlines is behind the bottom of the letter p so in small size links it's possible to get the underline that close to the text - but just not in big size links?

Any advice?