web前端|html教程
深入理解line-height、font-size、vertical-align
web前端-html教程
目录[1]行高[2]字体大小[3]垂直对齐
cvresize源码,vscode 打字效果,ubuntu副屏闪烁,添加 tomcat 库,sqlite 按汉字排序,织梦定时更新插件,前端三大框架原理,美团app爬虫,php代码表白,优秀seo网站,php小说阅读网站,dedecms网页不显示,数据库网页模板下载,静态页面 导出rss,sql人事管理系统代码模板,织梦图片站程序lzw
前面的话
视频播放网站 源码,vscode 文件缩略图,怎么拷贝Ubuntu,tomcat配置避免乱码,正定爬虫展,php 整合discuz,三明seo优化技术,网站后台视频播放,苹果cmsv10模板免费lzw
line-height、font-size、vertical-align这三个属性可谓是相互依赖的关系，改变行间距离、设置垂直对齐等都需要这三个属性的通力合作。本文涉及到的一些术语详细解释请参考块级元素基本术语和行内元素基本术语
ps源码是什么意思,ubuntu硬盘错误,抖音商品爬虫,东京 php,seo pv界面lzw
line-height
定义
line-height行高是指文本行基线之间的距离。在应用到块级元素时，line-height定义了元素中文本基线之间的最小距离；在应用到行内元素时，line-height定义了元素行内框的高度
值: | | | normal | inherit
初始值: normal
应用于: 所有元素
继承性: 有
百分数: 相对于元素的字体大小font-size
作用
行高line-height会显著影响行内元素如何显示。行高line-height实际上只影响行内元素和其他行内内容，而不会直接影响块级元素，也可以为一个块级元素设置line-height，但这个值只是应用到块级元素的内联内容时才会有影响。在块级元素上声明line-height会为该块级元素的内容设置一个最小行框高度
font-size
font-size字体大小设置的是字体中字符em框的高度，实际的字符字形通常比字符em框要矮
值: xx-small | x-small | small | medium | large | x-large | xx-large | smaller | larger | | | inherit
初始值: medium
应用于: 所有元素
继承性: 有
百分数: 相对于父元素的字体大小font-size
vertical-align
vertical-align用来设置垂直对齐方式，所有垂直对齐的元素都会影响行高
值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | | | inherit
初始值: baseline
应用于: 行内元素、替换元素、表单元格
继承性: 无
百分数: 相对于元素的行高line-height
[注意]vertical-align不影响块级元素中内容的对齐
vertical-align:baseline(元素的基线与父元素的基线对齐)vertical-align:sub(降低元素的基线到父元素合适的下标位置)vertical-align:super(升高元素的基线到父元素合适的上标位置)vertical-align:bottom(把对齐的子元素的底端与行框底端对齐)vertical-align:text-bottom(把元素的底端与父元素内容区域的底端对齐)vertical-align:top(把对齐的子元素的顶端与行框顶端对齐)vertical-align:text-top(把元素的顶端与父元素内容区域的顶端对齐)vertical-align:middle(元素的中垂点与父元素的基线加1/2父元素中字母X的高度对齐)vertical-align:(+-n)px(元素相对于基线上下偏移npx)vertical-align:x%(相对于元素的line-height值)vertical-align:inherit(从父元素继承vertical-align属性的值)
inline-block底部空隙
inline-block元素在块级元素中留空隙就是因为图像的默认垂直对齐方式是基线对齐(基线对齐在原理上图像底边与匿名文本大写英文字母X的底边对齐)；而匿名文本是有行高的，所以X的底边距离行框有一段距离，这段距离就是图像留出的空隙
于是，解决这个问题有以下几个解决办法
[1]display:block
因为垂直对齐方式只能作用于替换元素和行内元素，更改为块级元素，会使垂直对齐方式失效
[2]父级的line-height: 0
这样使匿名文本与行框的距离为0
[3]vertical-align: top/middle/bottom
