CSS 为什么 Bootstrap 将 line-height 属性设置为 1.428571429?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/19982651/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why does Bootstrap set the line-height property to 1.428571429?
提问by Ziyu Zhou
line-height: 1.428571429;
Why does Bootstrap set line-height
to this value?
为什么Bootstrap 设置line-height
为这个值?
(Some themesround it to 1.42857143.)
(一些主题将其四舍五入为 1.42857143。)
回答by Hynes
The line-height is determined by dividing the targeted line-height size by the font-size. In this example, Bootstrap is baselining their line-height off of a 14px font-size. The target line-height is 20px:
行高是通过将目标行高大小除以字体大小来确定的。在此示例中,Bootstrap 将其行高设为 14 像素字体大小的基线。目标行高为 20px:
20px ÷ 14px = 1.428571429
20px ÷ 14px = 1.428571429
When determining your line-height, you want to make sure you have ample white space between your rows. This allows for ascenders and descenders without intruding on other rows. Also having ample white space allows your eyes to develop a visual rhythm while reading.
在确定行高时,您要确保行之间有足够的空白。这允许上升和下降而不会干扰其他行。拥有充足的空白空间可以让您的眼睛在阅读时形成视觉节奏。
Also keeping the line-height unitless makes it more versatile. For more information, see Eric Meyer's post on this from February 2006.
同时保持行高无单位使其更加通用。有关更多信息,请参阅 Eric Meyer 于 2006 年 2 月就此发表的帖子。