line-height 行高

行高：两条文字基线之间的距离，基线实在英文字母中用到的一个概念，我们刚学英语的时使用的那个英语本子每行有四条线，其中底部第二条线就是基线，是a,c,z,x等字母的底边线。下图的红色线即为基线。

如果设为数字的话，表示行高为当前font-size的倍数，默认1.14，不用带单位也可以

如果是把它设为和高度一致的单位，例如30px，那么可以实现垂直居中

如果是百分比，那么是相对于当前font-size而言的

没有设置高，或高为百分比的情况下，输入内容，撑开元素的line-height，而不是文字

div{ background:blue; font-size:10px; line-height:0px; }

那么这个div 高度为0

line-height 水平垂直特性（就是文字处于盒子的垂直中间）

1、单行的话把行高设置成需要的高度即可

2、多行文字垂直居中

.multi{line-height:150px; border:1px solid red; padding-left:5px;}
.multi span{display:-moz-inline-stack; display:inline-block; line-height:1.4em; vertical-align:middle;}
.multi i{width:0; display:-moz-inline-stack; display:inline-block; vertical-align:middle; font-size:0;}

aaaaaaaaaaaaaaaaaaaaa bbbbbbbbbbbbbbbbbbbb

http://www.zhangxinxu.com/wordpress/?p=384

"x-height"就是指的小写字母'x'的高度；术语描述就是基线和等分线[mean line](也称作中线[midline])之间的距离。

CSS中有些属性值的定义就和这个"x-height"的有关，最典型的代表就是：vertical-align: middle，而相对于字符x的中心位置对齐

转载于:https://www.cnblogs.com/chuangweili/p/5160959.html

line-height 行高相关推荐

CSS——行高、字体、文本的样式
一.行高行高(line height)行高指的是文字占有的实际高度可以通过line-height来设置行高行高可以直接指定一个大小(ex pm)也可以设置一个整数如果是一个整数行高将会是字体的指定的 ...
Flutter Text 行高相关
前言 Text是Flutter最常见的Widget之一.我们可以用它放置文本,或者在默认组件不满足要求的情况下,可以结合其他组件来组成如按钮这些的自定组件. 虽然用法很简单,但不注意的情况下依旧会出现 ...
css文本省略（······）行高错位（bug）- 解决办法
应用css文本省略(······)属性:-webkit-line-clamp: 3; 导致:行高错位.(F12查看发现css属性line-height的值并没变,但为什么浏览器显示文本的实际行距却变小 ...
html中高与行高的区别,深入了解css的行高Line Height属性
什么是行间距? 古时候我们是用印刷机来处理文字,印出来的每个字都位于独立的一个块里. 行间距,即传说中控制两行文字之间垂直距离的东东. 在CSS,line-height被用来控制行与行之间的垂直距离. ...
html中高与行高的区别,CSS中line-height与height有什么区别
line-height--行高属性,设置文本模式上下距中伤隔. height--高度属性,设置装备摆设对象高度剖析图从上图我们就能够形象中的line-height与height判别: 1.违抗分歧 ...
CSS基础-行高（height和line-height)【学习笔记】
1 行高测量行高的测量方法: 2 单行文本垂直居中行高我们利用最多的一个地方是: 可以让单行文本在盒子中垂直居中对齐. 文字的行高等于盒子的高度. 这里情况些许复杂,开始学习,我们可以先从简单地方 ...
【转】css行高line-height的一些深入理解及应用
一.前言前两天在腾讯ISD团队博客上看到一篇翻译的文章"深入理解css 行高",是个不错的文章,学到了不少东西,建议您看看. 这里,我也要讲讲我对line-height的一些理解 ...
CSS 行高与行对齐精解：line-height 和 vertical-align （图文）
7.3 line-height 行高指的是文本行的基线间的距离,但是文本之间的空白距离不仅仅是行高决定的, 同时也受字号的影响. 7.3.1 语法 line-height属性的具体定义列表如下: 语 ...
css行高line-height的一些深入理解及应用
by zhangxinxu from http://www.zhangxinxu.com,原文地址:http://www.zhangxinxu.com/wordpress/?p=384 一.一些字面意 ...
【css】行高的计算
行高概念图行高的计算假设有如下代码 p {font-size: 36px; line-height: 1.5; } 行高 = 36px * 1.5 = 54px 参考深入了解css的行高Line ...

line-height 行高

line-height 行高相关推荐

最新文章

热门文章