有关于css中行高的问题

分析css中行高的问题

在网页中到底文字的行高是怎么算的，先说理论重点，然后举例说明：

本文重点是以下两点：

第一点：针对中文字的行高，在这里我推算了一个公式即使：行高=文字大小+文字上下两边相等之和。

第二点：

设置行高后，文字处在行高的中间位置

解释这个公式 :

文字大小，这个不用多说。文字上下两边相等值和是什么意思？例如：文字的大小是20px，行高是80px,那么文字所在位置是：距离上边30px，距离下边是30px。

因为文字设置行高时，永远都是行高的居中位置。

举个例子1：设置一个div的高度20px，文字为20px。根据公式推算：上下两边距为0。

如下代码：

样式为：div{font-size:20px;height: 20px;line-height: 20px;border:solid 1px red;font-weight: "微软雅黑";}代码结构：<div>请问您是二师兄吗？</div>复制代码

浏览器结果为：

举个例子2：如果把div高度设置成50px，行高设置成30px。按照分析，行高为30px，文字大小占20px，那么文字距离上边的距离为5px，距离下边的距离也是5px。

代码如下：

结构代码：<div>请问您是二师兄吗？<span>这个是下面一层的</span>
</div>样式代码如下：div{font-size:20px;height: 50px;line-height: 30px;border:solid 1px red;font-weight: "微软雅黑";
}
span{display: block;border:solid 1px black;height: 16px;font-size:16px;line-height: 16px;
}复制代码

浏览器结果为：

所以css中的行高等于文字的高度加上上下两边相等的距离。

有关于css中行高的问题相关推荐

html中行高是指字的高度嘛,CSS行高line-height的理解
一.行高的字面意思 "行高"顾名思义指一行文子的高度.具体来说是指两行文子间基线间的距离. 基线是在英文字母中用到的一个概念,我们刚学英语的时候使用到的那个英语本子每行有4条线,其 ...
CSS 行高与行对齐精解：line-height 和 vertical-align （图文）
7.3 line-height 行高指的是文本行的基线间的距离,但是文本之间的空白距离不仅仅是行高决定的, 同时也受字号的影响. 7.3.1 语法 line-height属性的具体定义列表如下: 语 ...
css行高line-height的用法
一.line-height语法 line-height属性的具体定义列表如下: 语法: line-height : normal | <实数> | <长度> | <百分比 ...
【转】css行高line-height的一些深入理解及应用
一.前言前两天在腾讯ISD团队博客上看到一篇翻译的文章"深入理解css 行高",是个不错的文章,学到了不少东西,建议您看看. 这里,我也要讲讲我对line-height的一些理解 ...
css行高line-height的一些深入理解及应用
by zhangxinxu from http://www.zhangxinxu.com,原文地址:http://www.zhangxinxu.com/wordpress/?p=384 一.一些字面意 ...
HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器 1
HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器前言没有使用任何框架,只是想用最简单纯js的代码实现下前台: Javascript+jQuery 后台: php/nodej ...
css行高（line-height）及文本垂直居中原理
css行高(line-height)及文本垂直居中原理一.行高的定义标准定义:两行文字基线之间的距离. 那么什么是基线? 基线是在英文字母中用到的一个概念,我们刚学英语的时使用的那个英语本子每行有 ...
Excel中行高、列宽尺寸的换算
Excel中行高.列宽尺寸的换算一.先说明一下度量单位的相互换算关系: 磅:指打印的字符的高度的度量单位.1 磅近似等于 1/72 英寸,或大约等于 1/28.35 厘米. 英寸:1英寸近似等于 ...

有关于css中行高的问题

分析css中行高的问题

有关于css中行高的问题相关推荐

最新文章

热门文章