一不小心了解了行间距的真相.

最新推荐文章于 2021-08-17 09:08:21 发布
最新推荐文章于 2021-08-17 09:08:21 发布
阅读量1.4k 收藏
点赞数
分类专栏： css问题 文章标签： microsoft border div 浏览器
众所周知的一个垂直居中实现方式(其他的暂不讨论)..
高度给定的元素, 其内部单行文本垂直居中的一种实现方式为: 给当前定高元素, 设置line-height属性, 其属性值等于当前元素的height值.

今天了解到了一条相关知识, 明白这个方法的实现原理.
我们常说的单倍行距, 双倍行距等等, 主观上认为是line-height设置的值, 如果量一下实际的效果, 会发现, 两行文本的间距, 并非等于line-height的值.

line-height.png

2012-1-2 14:53:39 上传
下载附件 (6.37 KB)


浏览器计算和分配行间距的方法
间距 = "line-height" – "font-size";
文本上下分配大小 = 间距/2;
字号 = 12px; line-height:3;
间距 = 3*12 – 12 = 24(px);
文本上下分配大小 = 24/2 = 12(px)

逻辑上如此无懈可击~ o.0


小知识点(个人认为, 应该这样)
"line-height的值, 推荐使用数字而非带有单位的值, 如, 推荐使用line-height:2; 不推荐使用line-height:24px;" 原因在于, line-height:24px;是一个固定的值, 对于任何大小的文本, 都采用这个值来计算行间距. 若文本的字号过大, 会出现重叠的问题. 不带单位的值表示倍数. 自然避免了该问题.
看下边的例子
复制代码 运行代码 编辑代码
  1. <!doctype html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8" />
  5.                 <style type="text/css">
  6.                 div{
  7.                         font-size:30px;
  8.                         font-family:Consolas,Microsoft Yahei,SimSun;
  9.                         margin:10px 10px 0px 10px;
  10.                         padding:10px;
  11.                 }
  12.                 #demo_1{
  13.                         background:#EEE;
  14.                         border:solid 1px #CCC;
  15.                         line-height:12px;
  16.                 }
  17.                 #demo_2{
  18.                         background:#333;
  19.                         border:solid 1px #000;
  20.                         line-height:2;color:#FFF;
  21.                 }
  22.                 </style>
  23.                 <title>Line-heighg demo</title>
  24.         </head>
  25.         <body>
  26.         <div id="demo_1">
  27.                 line-height:24px;<br />
  28.                 line-height:24px;
  29.         </div>
  30.         <div id="demo_2">
  31.                 line-height:2;<br />
  32.                 line-height:2;
  33.         </div>
  34.         </body>
  35. </html>
复制代码 运行代码 编辑代码

Powered by W3Cfuns.com



zxleezx
关注
专栏目录
java poi 段落行间距_poi-对于word的操作（一）
weixin_39828956的博客
02-26 3483
1 packagepoi.test;23 importjava.io.File;4 importjava.io.FileInputStream;5 importjava.io.FileNotFoundException;6 importjava.io.FileOutputStream;7 importjava.io.IOException;8 importjava.io.InputStream;9...
vue行间距_vuejs+elementUI前端页面总结
weixin_30841011的博客
02-22 6855
[if !supportLists]一、[endif]表单：1、常用属性说明(1)、:inline="true"行内表单模式：每个el-form-item横排(2)、:rules="outLibRule"定义校验规则，例如必填(3)、label-position="top"表单域标签的位置为top(4)、:model=”workForm”表单绑定数据源(5)、表单中el-form-item标签行间...
html表单标签form怎样设置空隙,Smartform中表(table)的行间距设置
weixin_28865303的博客
06-18 2725
使用TCODE SMARTSTYLES 进入到style的设置界面，也可以直接从TCODE smartforms 里面进入。STYLE 分为三部分，header data, paragraph format, character format。header data 设置style 的默认值，paragraph format 设置段落格式， 对齐方式，缩进，间距，行间距。其中space befor...
设置行间距，计算带行间距的文本高度
Sweety
09-11 4368
设置行间距，计算带行间距的文本高度 //求有行间距的label高度 - (CGSize)boundingRectWithSize:(CGSize)size WithStr:(NSString*)string andFont:(UIFont *)font andLinespace:(CGFloat)space { NSMutableParagraphStyle *style =
根据行间距计算label的高度
ZHZMAREN的博客
10-27 546
//根据行间距计算label的高度(1) - (CGSize)boundingRectWithSize:(CGSize)size WithStr:(NSString*)string andFont:(UIFont *)font andLinespace:(CGFloat)space   {              NSMutableParagraphStyle *style = [[NS
iOS UILabel设置行间距和字间距并计算高度
天道酬勤
10-27 3115
#define UILABEL_LINE_SPACE 6 #define HEIGHT [ [ UIScreen mainScreen ] bounds ].size.height //给UILabel设置行间距和字间距 -(void)setLabelSpace:(UILabel*)label withValue:(NSString*)str withFont
java设置行间距_Java中调整字距与行距的方法 其一（以DrawString为例）
weixin_39625468的博客
02-13 1886
今天要谈的是如何在Java中调整字距与行距，当然，这里谈的主要是针对swing与awt里的字距与行距。调整字距与行距看起来似乎是个很简单的问题，大概可以直接调用某个内置的方法来操作，紫雾我最开始也是这么觉得的，但找了一圈也没发现相关方法，没办法，自己写吧，毕竟也不难。其实调整字距的方法有很多种，本文介绍其中一种，即直接指定每个字符的初始位置，从而自由调控字距与行距。其实实现手段还有很多种，我过些天...
Unity Text字间距和行间距调整
DAo_1990的博客
08-17 5672
一、问题 在3D场景中常见文字，通过调整字体大小和锚点放大文字和清晰度，但是无法调整字间距，同时网上资料可以调整字间距，但是换行前面会出现空白。 二、解决办法 通过重新ModifyMesh函数到达调整字间距，同时同调试发现需要给一定误差范围来解决换行前面出现空白问题。 TextSpacing.cs using UnityEngine; using System.Collections; using UnityEngine.UI; using System; using ...
C# ListView添加行距(ListView 添加行间距)源代码
08-25
我要的是增大行间距。 二、解决方法： // // imageList1 // this.imageList1.ImageSize = new System.Drawing.Size(2, 30); this.imageList1.TransparentColor = System.Drawing.Color.Transparent; this....
Linux下vi修改行距,调整label中text显示的行间距
weixin_33958871的博客
05-13 543
iOS UILabel UITextView UIButton 等等显示文本行间距iOS UILabel UITextView UIButton 等等显示文本行间距都用如下方法 NSMutableParagraphStyle *paragraphStyle = [[NSMutab ...UIMenuController在label中的使用要想在label中使用 必须是继承于label的分类 /...
修改行间距等基本操作
weixin_30696427的博客
02-28 951
系统默认的行间距 可在preferences中进行修改，修改后要重新启动软件才有效，此时行距为设定的行距 在命令行窗口中输入preferences，在弹出的窗口中选择如下 或者是在命令行窗口中直接输入format compact,这时不需要重新启动软件，但是关闭软件后重新打开时还是会恢复为系统默认的行距 修改后的行距如下 在命令行窗口中输入clc命令可以清屏，但是仍...
AWK 行距和行号计算
极客点儿
07-26 731
http://blog.csdn.net/r77683962/article/details/8543488 http://blog.csdn.net/cbffyx/article/details/8998238 http://blog.sina.com.cn/s/blog_716844910100tfxv.html
javafx 行间距 lineSpace windows linux 区别
weixin_36215129的博客
08-06 268
问题：在linux中文本的行间距会明显大于windows，尽管使用的是同一段代码 解决：可在代码中根据操作系统自行调整行间距大小 sample: text.lineSpacingProperty().bind(myModel.lineSpacingProperty().subtract(10)));
word 中同样的单倍行距，不一样的行距？
热门推荐
missingu1314的专栏
04-24 2万+
两篇文档，都是小四号字，都是单倍行距，可是行距明显不同，把其中的一个文档的一页复制到另一个文档，可以占一页半内容。为什么呢？ 原来是“页面设置”不一样。 解决办法是： WORD的“页面布局”选项卡下“页面设置”栏，打开“页面设置”对话框，修改对话框的“文档网络”选项卡下设置，将“网格”栏选为“指定行和字符网格”然后修改“字符数”栏和“行数”栏的设置。一般还需要配合修改页边距的设置
iOS UILabel 行间距与高度自适应优化教程
`：此方法用于设置行间距，接受一个 UILabel 实例和一个浮点数参数，表示要设置的行间距值。它将普通字符串转换为 NSAttributedString，并应用新的行间距。 2. `+(void)changeWordSpaceForLabel:(UILabel*)...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值