css line-height屬性設置行高

2020-12-14 國哥筆記

line-height屬性定義及用法

在css中,line-height屬性是使用來設置行高,即設置行間的距離。所以瀏覽器都支持該屬性,但是任何的版本的Internet Explorer(包括 IE8)都不支持屬性值"inherit";

說明

該屬性會影響行框的布局。在應用到一個塊級元素時,它定義了該元素中基線之間的最小距離而不是最大距離;line-height 與 font-size 的計算值之差(在 CSS 中成為「行間距」)分為兩半,分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框;原始數字值指定了一個縮放因子,後代元素會繼承這個縮放因子而不是計算值;line-height屬性語法格式

css語法:line-height:normal/number/length/%/inherit;JavaScript語法:object.style.lineHeight="2";line-height屬性值說明

normal:默認,設置合理的行間距;number:設置數字,此數字會與當前的字體尺寸相乘來設置行間距;length:設置固定的行間距;%:基於當前字體尺寸的百分比行間距;inherit:規定應該從父元素繼承 line-height 屬性的值;實例:

<!DOCTYPE html><html><head><meta charset="utf-8" />

<title>css line-height屬性設置行高</title>

<style type="text/css">.small {line-height:80%;}.big {line-height:180%;}</style>

</head><body><p>這是一個標準行高的段落。<br>

這是一個標準行高的段落。<br>這是一個標準行高的段落。<br></p>

<p>這是一個更小行高的段落。<br>

這是一個更小行高的段落。<br>這是一個更小行高的段落。<br></p>

<p>這是一個更大行高的段落。<br>

這是一個更大行高的段落。<br>這是一個更大行高的段落。<br></p>

</body></html>

運行結果:

css line-height屬性設置行高

相關焦點

  • Padding與line-height的區別
    Padding與line-height的區別 本文和大家分享一下Padding屬性與line-height的區別,這是CSS基礎知識,對盒模型知識與布局以及相關屬性不是很了解的時候,是很容易混淆與分不清楚的。
  • 深入理解CSS:font metrics, line-height 以及 vertical-align
    懷疑是知識的鑰匙來源:http://zcfy.baomitu.com/article/deep-dive-css-font-metrics-line-height-and-vertical-align-vincent-de-oliveira-2616.html原文:http://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
  • css max-height屬性設置元素最大高度
    max-height屬性定義及用法在css中,max-height屬性是使用來設置元素的最大高度,就是元素達到最大高度後,不會隨元素內容的增加而增加。該屬性設置的最大高度不包括填充,邊框,或頁邊距。max-height屬性用的不是很多,一般用該屬性都是為了防止元素內容太多把高度撐的太高而影響布局效果,設置最大高度之後,就不會因為元素內容太多將高度撐的太高而影響整體的布局。
  • CSS樣式--字體屬性和文本屬性
    如下圖所示:上圖中,我們設置行高為30px,30px * 5 = 150px,通過查看審查元素,這個p標籤的高度果然為150px。而且我們發現,我們並沒有給這個p標籤設置高度,顯然是內容將其撐高的。垂直方向來看,文字在自己的行裡是居中的。比如,文字是14px,行高是24px,那麼padding就是5px:
  • CSS深入理解學習筆記之line-height
    4、line-height各類屬性值  line-height:normal/<number>/<lenght>/<percent>/inherit;  normal:默認屬性值。與瀏覽器和元素字體相關。因此為了讓各個瀏覽器兼容性一致,要初始化line-height。
  • web前端學習路線css屬性
    下面來給大家講講css相關知識:學習目標· 1、css屬性和屬性值的定義· 2、css文本屬性· 3、css列表屬性· 4、css背景屬性· 5、css邊框屬性· 6、css浮動屬性一、css屬性和屬性值的定義屬性:屬性是指定選擇符所具有的屬性,它是css的核心,css2共有150多個屬性屬性值:屬性值包括法定屬性值及常見的數值加單位,如25px,或顏色值等。
  • CSS網頁的布局設置
    1.網頁的布局2.內容垂直居中盒子中只有一行文本 ,讓內容在盒子中垂直居中,設置行高的高度(line-height)和內容的高度(height)一致3.行內元素和塊元素行內元素:一行內可以有多個標籤,寬度是由內容決定例如 img a span ins b 默認的css樣式display:inline;塊元素:自己獨佔一行,縱向排列 ul,li,ol,dt,dd,div 默認的css樣式display:block;塊轉化行內元素: display
  • 前端基礎篇之CSS世界
    好基友`line-height`和`vertical-align`line-height和vertical-align是控制元素垂直對齊的兩大屬性,也是最難理解搞懂的屬性。字母 x 的角色在內聯元素的垂直方向對齊中,基線是最為重要的概念。line-height定義的就是兩基線之間的距離,vertical-align的默認值就是基線。基線的定義則是字母 x 的下邊緣。
  • (06)CSS 給文本加樣式:② 文本屬性 | CSS
    首行縮進文本水平對齊(左對齊、右對齊、居中等)行高字母和字間距處理空白符其他1 對文本本身進行「小整形」1.1 轉換一下文本的大小寫text-transform 屬性用於設置要轉換的字體。💡text-align-last 屬性用於定義一段文本內容的最後一行在被強制換行之前的對齊規則。2.3 行高line-height 屬性用於設置文本每行之間的高。當行與行之間拉開空間,正文文本的閱讀體驗會更好。「高」可以接受大多數單位,但實際工作中我們常常設置一個無單位的值作為乘數。
  • 我腦中飄來飄去的 CSS 魔幻屬性
    針對於父元素div設置行高足夠小,比如.test{line-height:0},至於這麼小嗎,其實高度小於top線和baseline線之間的距離的距離就行了,至於到底多小,這和font-size是相關的,其目的就是沒有多餘的高度拿來給baseline下面的空間用(個人理解);上面說了設置line-height最小和font-size
  • css 垂直居中的幾種實現方式
    實現方式備註:如下頁面效果中的灰色方框高度都做了限定為 100 px(即父元素)1、line-height 方式line-height 設置行高,多用於控制多行文本之間的間隔大小。但利用它的特性也可以控制垂直居中。
  • 前端開發必備的CSS命名規範與常用CSS代碼集合
    ,style.css主要的module.css模塊base.css基本共用layout.css布局,版面themes.css主題columns.css專欄font.css文字、字體forms.css表單mend.css補丁print.css列印三、藉助翻譯工具如果遇到不常用的一些名稱,可以藉助翻譯工具進行翻譯取其英文命名。
  • 【教程】html+css零基礎入門教程(九)
    可以按順序設置如下屬性:font-style font-variant font-weight font-size/line-height font-family如下代碼:.ex2{font:italic bold 12px/20px arial,sans-serif;}頁面上顯示為 F2E.TMING還有一些屬性也可以寫
  • 從零開始寫代碼(九),CSS選擇器以及一些屬性
    Hello,今天繼續學習的是常用到的css選擇器的一些類型,包括裡面用到的屬性,又到了像是學英語單詞的時候,還是那句話,雖然這些東西都可以在用的時候去查,但是作為一個合格的程式設計師,怎麼能邊寫代碼邊查呢!
  • 在文字編排中如何準確設置行高
    3.英文的行高在設置文本行高的之前,需要理解一下「行高」與「行間距」的差別。前端DIV+CSS和設計Affinity Designer等繪圖軟體都是以「行高」來進行定義的。在CSS-Style line-height屬性是行高,值分別以百分比、數值和像素來表示。
  • CSS入門
    還有很多,百度吧3.3屬性選擇器屬性選擇器可以根據元素的屬性及屬性值來選擇元素。<!--屬性選擇器:標籤[屬性]{}--> <style> p[id]{ background: #6200ff } /* 以class屬性值為例: = class屬性值完全相等JAVA ~= class屬性值中包含
  • 對CSS居中的一點總結
    這裡需要注意的是元素需要設定width屬性,否則元素的寬度會自動充滿父元素,就不存在相對父元素水平居中一說了。示例代碼點擊預覽這裡需要注意的是這種方法對設置float屬性的塊級元素是沒有效果的,浮動元素的居中這裡有一個解決方案,但是該方法的布局比較混亂,子元素脫出父元素,並不推薦。
  • CSS樣式大全
    (微信後臺回復「CSS」,即可獲得關於css設計的幫助文檔哦)字體屬性:(font)大小 {font-size: x-large;}(特大) xx-small;(極小) 一般中文用不到,只要用數值就可以,單位:PX、PD樣式 {font-style: oblique;}(偏斜體) italic;(斜體) normal;(正常)行高
  • CSS常用技巧介紹
    但這個屬性在CSS裡面卻行不通。解決方法是把內容的行高設置成與內容塊一樣高。比如你的div高是32px,那就在你的CSS定義裡面添加屬性 line-height: 32px; 這樣文字看上去就垂直居中於層裡面了。不過這個方法只適用於單行文字,對於多行文字,似乎沒有什麼好方法。6.
  • 工作中常用CSS基礎知識整理匯總
    : 3; overflow: hidden; }二、 文字垂直居中1、單行文字的垂直居中height 和 line-height 同樣的高度.box{ width:200px; height:100px; line-height:100px;}