文档章节

理解line-height

IrisHuang
 IrisHuang
发布于 2016/04/24 22:03
字数 285
阅读 87
收藏 0

line-height:指的是行高;也就是两行文字基线之间的距离,取值为:line-height:base-line/bottom/middle/数值/百分比/normal/inherit/;默认值为base-line;

其相关知识点主要有一下几点:

1、内联元素的高度由line-height决定,而不是由font-size决定;

2、行高=内容区域高度+行间距;而行间距又可分为半行间距,分布在内容区域上下;

3、在SimSun字体下,内容区域高度为font-size;

4、多行文本的高度由单行文本高度累加;

5、在文本比较多的网页中,如博客,line-height一半设置为1.5/1.6;在一般的商业网站中,line-height一般设置为=20px/font-size;


图片在文本框中,一般下面会流出一些距离,那是因为基线的问题,等于半行边距;要消除那半行间距的方法有:

1、图片块状化:display:block;

2、图片与底线对齐:vertical-align:bottom;

3、行高足够小:基线位置上移,一般10px以下就行;


利用line-height实现大小不固定的图片垂直居中:

.box{line-height:300px;text-align:center;}
.box>img{vertical-align:middle;}


© 著作权归作者所有

IrisHuang
粉丝 3
博文 68
码字总数 39102
作品 0
武汉
前端工程师
私信 提问
深入理解line

什么是行间距? 古时候我们使用印刷机来出来文字。印刷出来的每个字,都位于独立的一个块中。 行间距,即传说中控制两行文字垂直距离的东东。在CSS中,line-height被用来控制行与行之间垂直距...

刘元兴
2017/05/18
0
0
css行高line-height的一些深入理解及应用

二、一些字面意思 “行高”顾名思意指一行文字的高度。具体来说是指两行文字间基线之间的距离。基线实在英文字母中用到的一个概念,我们刚学英语的时使用的那个英语本子每行有四条线,其中底...

manlianman
2013/10/22
0
0
CSS进阶(7)—— 内联元素的掌管者line-height和vertical-align(上)

在CSS世界中,块级元素一般负责结构,而内联元素则负责文字内容,而CSS设计的初衷就是面向图文混合排版,因此内联元素在CSS世界中有着非常重要的地位。由于本章内容较多,因此特分为上下两章...

闲人王昱珩
06/14
0
0
Q:你知道如何用line-height使多行文字垂直居中么?

我们先看运行效果: 知识点 line-height(行高) : 指的是两行文字间基线之间的距离,而实际撑开div高度的不是height,而是line-height。 line box : 每一行称为一条line box,它又是由这一行...

Juicyangxj
2017/11/29
0
0
【前端Talkking】CSS系列——CSS深入理解之line-height

1.写在前面 两个多周的时间没有写文章了,手好痒好痒,趁着公司在装修,从上周末到本周都在家办公,同时公司的项目并不紧急,于是抽着时间梳理了一下CSS中关于行高的理解,今天发布出来,大家...

micstone
2018/06/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

64.监控平台介绍 安装zabbix 忘记admin密码

19.1 Linux监控平台介绍 19.2 zabbix监控介绍 19.3/19.4/19.6 安装zabbix 19.5 忘记Admin密码如何做 19.1 Linux监控平台介绍: 常见开源监控软件 ~1.cacti、nagios、zabbix、smokeping、ope...

oschina130111
昨天
64
0
当餐饮遇上大数据,嗯真香!

之前去开了一场会,主题是「餐饮领袖新零售峰会」。认真听完了餐饮前辈和新秀们的分享,觉得获益匪浅,把脑子里的核心纪要整理了一下,今天和大家做一个简单的分享,欢迎感兴趣的小伙伴一起交...

数澜科技
昨天
26
0
DNS-over-HTTPS 的下一代是 DNS ON BLOCKCHAIN

本文作者:PETER LAI ,是 Diode 的区块链工程师。在进入软件开发领域之前,他主要是在做工商管理相关工作。Peter Lai 也是一位活跃的开源贡献者。目前,他正在与 Diode 团队一起开发基于区块...

红薯
昨天
43
0
CC攻击带来的危害我们该如何防御?

随着网络的发展带给我们很多的便利,但是同时也带给我们一些网站安全问题,网络攻击就是常见的网站安全问题。其中作为站长最常见的就是CC攻击,CC攻击是网络攻击方式的一种,是一种比较常见的...

云漫网络Ruan
昨天
27
0
实验分析性专业硕士提纲撰写要点

为什么您需要研究论文的提纲? 首先当您进行研究时,您需要聚集许多信息和想法,研究论文提纲可以较好地组织你的想法, 了解您研究资料的流畅度和程度。确保你写作时不会错过任何重要资料以此...

论文辅导员
昨天
44
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部