line-height
:属性设置行间距参数(行高,不允许使用负值)。
通常情况下,我们使用line-height
是为了使内容上下居中,对行内元素实现高度的控制,通常情况下,line-height
的设置都可以很好的完成它所要承担的工作,只是也有的时候,会出现一些特例,比如会导致布局出现问题。
1:line-height基础
W3C
中,对于line-height
这样描述:line-height
属性会影响行框的布局,在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。
line-height
与font-size
的计算值,分为两半,分别加到一个文本行的内容的顶部和底部。可以包含这些内容的最小框就是行框。
line-height
的取值可以包含以下几种格式:
normal
:默认取值,会根据内容设置合理的行间距。number
:设置为数字,此数字会与当前的字体尺寸相乘来射行间距。- length:设置固定的行间距。
- %:和
number
相同,基于当前字体的尺寸的百分比设置行间距。 inherit
:规定从父元素继承line-height
属性的值。
line-height
属性时,元素中自带的line-height
属性是normal
,但是当一个元素设置了line-height
属性时,它的所有的子元素,都会继承这一个line-height
属性。
二:line-height的基本使用方法。
首先要明确一点,只有文本行出现的标签,line-height
才是有效的,如果只是单纯的标签之间的嵌套,line-height
是不会有作用的。比如:
.a{
line-height:30px;
}
<div class = "a"></div>
事实上,上面这个标签在页面上是不会占据任何位置的,如果没有其他的margin
,padding
,border
的设置,这个div
的大小就是width:100%
,height:0
;因为它是一个空的。就算是嵌套了几层这样的标签,只要标签中没有文本出现,都是相同的情况。
那么如果有文本出现呢?这个就很明显了,就会根据line-height
的设置,显示包含文本的标签的高度,并且使得文本的显示上下居中。
简单的测试代码:这里就以设置line-height=30px
进行对比:
//HTML代码
<div class = "b">这个是设置了height=30px,作为下面设置line-height对比所用。</div>
<div class = "a" style = "line-height:30px;">
<div>这里设置了一个固定的line-height,值为30px</div>
</div>
//CSS代码
.a{border:1px solid #aaa;margin-top:10px;}
.a div{border:1px solid #eee;}
.b{height:30px;border:1px solid #aaa;margin-top:10px;}
该段代码的显示如下图:
由图中可以看出,两个模块显示的高度是相同的,唯一的差别就是,第二个div
中的文字上下居中了,当然,这种设置也只适合单行文本的居中,如果你的文本是多行内容的话,就需要使用其他的方法,来实现文本的居中了,这里不做说明。
更多其他的line-height
取值,及其不同取值的对比,请点击:line-height不同取值的显示demo
三:在浏览器下,会影响布局的情况
上面提到的line-height
的使用方法,在各主流浏览器下都是可以兼容的,都是没有问题的,但是看看下面这段代码。
//CSS代码
.news{
width:960px;
margin:0 auto;
font-size:12px;
}
ul,li{
list-style:none;
margin:0;
padding:0;
}
.list{
overflow:hidden;
zoom:1;
border:1px solid #aaa;
margin-top:10px;
}
.list li{
width: 148px;
float: left;
line-height: 30px;
border-bottom: 1px #CCC dotted;
border-right: 1px #ccc dotted;
text-indent: 20px;
}
//HTML代码
<div class = "news">
<ul class="list">
<li>AAAAA:<span style = "font-size: 13px;">1112222</span></li>
<li>BBBBBBB</li>
<li>CCCCCCC</li>
<li>DDDDDDD</li>
<li>EEEEEEE</li>
<li>FFFFFFF</li>
<li>GGGGGGG</li>
<li>HHHHHHH</li>
<li>IIIIIII</li>
</ul>
</div>
运行一下这段代码,然后看看在浏览器下,有什么区别?
看看这里的截图吧:
不知道你有没有看到这样的效果呢?
在有些浏览器下,会出现排版错位哦,如果你没有看到这样的效果,那么使用IE浏览器试试吧,或者你可以直接点击:line-height导致排版错位demo
这是什么原因导致的呢?如果你熟悉浮动的规则,那么你肯定一眼就能确认问题导致的因素,就是因为第一个浮动元素的高度,增加了,导致后面的元素在换行时,被卡在了第一个li
的后面,可是,第一个li
的高度,为什么增加了呢?
如果只是在一个项目中,突然发现了这么一个问题,那么要去确认这个问题的来源,你旧的一个个的去排除,然后确认出,是哪一个CSS
的设置,导致了这个问题的出现,但是在我给出的这个最简单的demo
里,相信你一眼就可以看出问题的原因了吧。因为第一个li
中,有一个子标签的字体设置的大小,比原来的字体大小增加了1像素。
如果想要看到其他浏览器下的这个排版的错误,那你可以点击这里:line-height在所有浏览器下导致排版错位demo
至于为什么会出现这个情况,我还没有能找到合理解释的原因,不过,出现这个排版错误的情况可以这么解释一下:在一段文本中,如果使用一个行内元素的标签,来对一段文字进行特殊处理,如果这个特殊处理中,有改变文字的字体大小,但又没有设置line-height
属性为normal
,那么就会影响到这个文本的父元素的所占的高度。而如果是在这个父元素上面,直接改变文字大小,则不会有影响。
所以呢,如果你要改变某一段文字的字体大小,使得这块内容更为突出,但是又不想对布局产生影响,那么你可以有两种方法进行处理:1,在该模块的父元素上面改变字体大小,这个不太好,因为会使得该段内容字体整体都会变化。2,在需要改动的部分,再次设置line-height:normal
。这样就可以解决上面出现的问题了。你可以点击这里查看:line-height导致排版错位的;两种解决方法demo
这样看来,引起布局出错的根本原因,就是line-height
的继承问题。那么具体为什么会出现这个影响呢?为什么出现这个原因,我现在还找不到一个合理的解释,如果您看了这篇文章,并且对此有过研究,希望您能指点。
文章写作的起因来自CSDN
论坛的一个帖子:请教IE8兼容视图下CSS样式显示不正确问题