10
6
2011
4

css 之 line-heigt & height & font-size 摘记

line-height 属性设置行间的距离(行高)。

 

该属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。

line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

 

总结:line-height减去font-size,所得的高是当前文字的顶端距离上一行文字的底端的长度。或者说是line-height包含了font-size,而其差值则平分在font-size即文字的上下两侧了!

    其中line-height似乎不能为负的样子,但它与font-size的差值可以为负,如果为负的话,二行文本就会出现重叠现象了!

  需要注意的是line-height可以填相对值,如1,表示与font-size同。

 

本文仅仅作个记录,若要详细了解请自行网上搜索或见参考资料。

参考资料:

  http://www.w3school.com.cn/css/pr_dim_line-height.asp

  关于使用line-height单行文本的垂直居中问题

Category: Web摘记 | Tags: css | Read Count: 2792
Avatar_small
Digital Ali 说:
2021年9月07日 20:10

Took me time to read all the comments, but I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commenters here! It’s always nice when you can not only be informed, but also entertained! crackstreams mma

Avatar_small
Digital Ali 说:
2021年9月08日 16:35 It is a great website.. The Design looks very good.. Keep working like that!. เว็บหวย
Avatar_small
Digital Ali 说:
2021年9月08日 19:25

I'm glad to see the great detail here!. 123movies websites

Avatar_small
Digital Ali 说:
2021年9月09日 22:18

This is a truly good site post. Not too many people would actually, the way you just did. I am really impressed that there is so much information about this subject that have been uncovered and you’ve done your best, with so much class. If wanted to know more about green smoke reviews, than by all means come in and check our stuff. https://docs.google.com/spreadsheets/d/1ntiogcbDulo3Vl9Htd7Jl9Xy-2kUp7-F33vbQ4q67Uc/edit#gid=409280497


登录 *


loading captcha image...
(输入验证码)
or Ctrl+Enter

Host by is-Programmer.com | Power by Chito 1.3.3 beta | Theme: Aeros 2.0 by TheBuckmaker.com