欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

深入理解line-height、font-size、vertical-align_html/css_WEB-ITnose

程序员文章站 2024-01-30 21:35:16
...
目录 [1]行高 [2]字体大小 [3]垂直对齐

前面的话

  line-height、font-size、vertical-align这三个属性可谓是相互依赖的关系,改变行间距离、设置垂直对齐等都需要这三个属性的通力合作。本文涉及到的一些术语详细解释请参考块级元素基本术语和行内元素基本术语

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