line-height系列(二)——对行内元素(文字、图片、兄弟元素)、块级元素设置line-height后的表现
》原创文章,转载请注明来源!
二、对行内元素(文字、图片、兄弟元素)、块级元素设置line-height后的表现
- line-height通过行内元素(文字、图片等)表现。
- 文字的line-height能使文字居中,即垂直居中性。
- 文字的line-heigh可以通过继承也可以使用内联得到(内联优先)。
- 图片的line-height不能居中,放映出的特点是图片底部总是超过行高中垂线6px的距离。
- 图片的line-height只能通过继承得到,内联设置无效。
- 同一行的line-height,中垂线对齐(span)/底线对齐(div)。
1,line-height通过行内元素表现。
<div class="number1" style="line-height:150px;"> <div>你好hahahah<br/>这里是第二段</div> </div>
里面的行内元素(文字)分别继承了line-height 150 而当父元素里无任何行内元素时,line-height不起作用。
2,给图片设置line-height
在测试过程中,笔者发现一个奇怪的6px现象,虽然估计并没啥卵用。以下是笔者的观察得出的结论,欢迎吐槽和批评。
结论:
1,图片的line-height只能根据继承得到,写在内联里会被覆盖。
2,给图片设置line-height并不能使其居中。表现为图片底部向上总是距离行高中垂线6px。
关于图片line-height的神秘6px——图片底部向上到行高中垂线的距离始终为6px
为了对比相同line-height下文字和图片的高度表现,为各个行内元素都加上了div,因为div都是由内部的行内元素的高度撑起来的,可直观反映出行内元素的高度。为了横向对比,display设置为inline-block。(实际代码中为了避免inline-block存在间距的影响,html代码是连在一起的)
<div style="line-height:150px"> <div class="first">你好hahahah</div> <div class="wraper"> <img src="C:\Users\Administrator\Desktop\桌面\gallery4.jpg" > </div> <div class="sec">这里是第二段</div> </div> .first,.sec{display:inline-block;font-size:16px} .wraper{display:inline-block} .wraper img{height:120px;line-height:60px}
![](https://images2015.cnblogs.com/blog/1080811/201701/1080811-20170119235645500-491895926.png)
给图片高度为120px设置行高150px后具体行高的变化:189px。
两旁文字的行高为150px,和图片的行高底部对齐。从图片中可以看到三个继承了同样line-height的元素对齐的应该是同一条中垂线,并且对齐的不是图片高度的中垂线而是本来的正常的150px中垂线。那样图片相当于多出来的高度撑高了顶部,不纳入行框里。
经过计算————
露出了的图片高度是189-150=39;即图片位于内部的高度是81px;
底部距离中垂线:81px-150px/2=6px。
逆推导:图片会露出高度为120px-(6px+75px)=39px,图片实际行高:39px+150px=189px
同理可证:img height=60px,line-height=60px, 总line-height=60px-(6px+30px)+60px=84px
![](https://images2015.cnblogs.com/blog/1080811/201701/1080811-20170119235836593-1118771474.png)
进而得出结论:
- 当图片的高度 height-6px<=行高/2时,行高高度为实际高度。即使图片高度只有5px,图片底部距离行高中垂线也只有6px。
![](https://images2015.cnblogs.com/blog/1080811/201701/1080811-20170119235931625-1882372038.png)
- 当图片的高度 height-6px>0 且 行高<12px,图片高度为实际高度。
- 当 图片的高度 height-6px>行高/2时,实际高度为 height-6px+lineHeight/2
结论:请不要轻易给图片加line-height!!
3,兄弟元素设置line-height
在同一行的inline/inline-block元素中,设置了inline-block的div元素对齐方式表现为底线对齐,而像span这样原本就是inline元素的兄弟元素表现为中垂线对齐。
<div class="span_part"> <span style="line-height:20px">行高20</span> <span style="line-height:50px;font-size:30px">行高50</span> <span style="line-height:18px;">行高18</span> <span style="line-height:70px;font-size:20px">行高70</span> </div> <br/> <div class="div_part"> <div style="font-size:50px">字体50</div> <div style="font-size:30px">字体30</div> <div style="font-size:10px">字体10呵呵</div> <div style="font-size:70px">字体70</div> </div> <br/> .span_part{border:1px dashed grey; margin-left:30px;} .span_part span{display:inline-block; } .div_part{line-height:150px; border:1px dotted grey; margin-left:30px;} .div_part div{ display:inline-block;}
三、line-height的实际应用
单行文字应用:
直接line-height设为父元素一样就可以居中。
若和父元素的高度不一致,如下:
当父元素height和子元素line-height冲突
height:16px;
line-height:36px;
布局上的框大小以父元素的height为准,文字的框大小以line-height为准,但不占据空间。
![](https://images2015.cnblogs.com/blog/1080811/201701/1080811-20170120001406515-22839180.png)
多行文字应用:
<div style="line-height:150px"> <span style="line-height:15px;display:inline-block"> 这是第一行<br/> 这是第二行 </span> </div>
![](https://images2015.cnblogs.com/blog/1080811/201701/1080811-20170120095235328-2013892744.jpg)
如果不设置display:inline-block,则会每一行都占据150px。目前还不理解为什么会这样~
① 父元素(这里是div)设置和高度一致的 line-height (如200px)
② 子元素 (这里是span) 设置合适的line-height,并设置display:inline-block、vertical-align: middle;
在文章中的应用:
line-height可以有多种表示方法:px/em normal % inherit
当考虑到继承性,最好用line-height:1.5
2017-01-20 10:05:09
posted on 2017-01-20 09:58 zeifenbing 阅读(5764) 评论(0) 编辑 收藏 举报