在这种情况下，精确线宽如何工作 [英] How does exactlly line-height work in this case

问题描述

在此问题中，将定位文本定位在div ，并给出相同的代码，我在此重复此处：

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

HTML标记

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

CSS样式

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

回答

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

小提琴

我的问题是为什么不是line-height让a突破div

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

推荐答案

它打破了div。如果你在 a 标签中放置一个 span ，并给出一个inline-block所以你可以看到它）你会意识到。记住，span继承了line-height。查看：

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 /

给予 a 更大的行高，也能够意识到它正在打破这个鸿沟： http://jsfiddle.net/fnX9n/7 /

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/

这篇关于在这种情况下，精确线宽如何工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！