html - How does exactlly line-height work in this case

Question

In this question positioning text of anchor within a div and given the same code which I repeat here:

HTML Markup

<div id="header"> 
    <a href="cattle.html" class="current">Cattle Farms</a> 
</div> 

CSS Style

#header a { 
    width: 100%; 
    height: 100%; 
    display: block; 
    font-size: 25px; 
} 

Answer

div#header a { 
    width: 100%; 
    height: 100%; 
    display: block; 
    text-indent: 20px; 
    line-height: 350px; 
} 

Fiddle

My question is why does not the line-height make the a break out of the div

Answer 1

It does break out of the div. If you put a span inside the a tag and give it a display of inline-block (and a background-color so you can see it) you'll realize it does. Remember the span inherits the line-height. Take a look:

http://jsfiddle.net/fnX9n/6/

Give the a a bigger line-height and without anything else you'll also be able to realize it is breaking out of the div: http://jsfiddle.net/fnX9n/7/