16-CSS行高那些事 (line-height)

一、行高測量

行高的測量方法:


文字對齊方式
行高的測量方法

二、單行文本垂直居中

行高我們利用最多的一個(gè)地方是: 可以讓單行文本在盒子中垂直居中對齊。

文字的行高等于盒子的高度。

行高 = 上距離 + 內(nèi)容高度 + 下距離

行高的組成

上距離和下距離總是相等的,因此文字的行高等于盒子的高度時(shí),文字看上去是垂直居中的。

三、行高和高度的三種關(guān)系

  • 如果 行高 等于 盒子高度 ,文字會(huì) 垂直居中

  • 如果行高 大于 盒子高度 ,文字上距離 變大,文字顯示會(huì) 偏下

  • 如果行高 小于 盒子高度 ,文字上距離 變小,文字顯示會(huì) 偏上

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 行高: 兩行文字“基線”之間的垂直距離 基線并不是漢字的下端沿,而是英文字母"x"的下端沿 行距: 一行“底線”至...
    lmmy123閱讀 1,821評論 0 2
  • 1,行高的定義 行高是指行間的距離,也就是基線之間的距離,而只有兩行文字才會(huì)存在兩個(gè)基線,那么為什么單行文字還具有...
    Bennt閱讀 1,731評論 2 7
  • 一、CSS入門 1、css選擇器 選擇器的作用是“用于確定(選定)要進(jìn)行樣式設(shè)定的標(biāo)簽(元素)”。 有若干種形式的...
    寵辱不驚丶?xì)q月靜好閱讀 1,733評論 0 6
  • vertical-align 先看一個(gè)例子 baseline(默認(rèn)值)基線,盒子的基線大約在其內(nèi)部文字(匿名)盒子...
    吳立寧閱讀 2,637評論 0 4
  • CSS 是什么 css(Cascading Style Sheets),層疊樣式表,選擇器{屬性:值;屬性:值}h...
    崔敏嫣閱讀 1,578評論 0 5

友情鏈接更多精彩內(nèi)容