前端學習 Css 行間距

2022-05-09 05:21:08 字數 1444 閱讀 9164

在css並沒有為我們提供乙個直接設定行間距的方式,我們只能通過設定行高來間接的設定行間距,行高越大行間距越大。

使用line-height來設定行高 。

行高類似於我們上學單線本,單線本是一行一行,線與線之間的距離就是行高,網頁中的文字實際上也是寫在乙個看不見的線中的,而文字會預設在行高中垂直居中顯示。

行間距 = 行高 - 字型大小。

通過設定line-height可以間接的設定行高,可以接收的值:

1.直接就收乙個大小;

2.可以指定乙個百分數,則會相對於字型去計算行高;

3.可以直接傳乙個數值,則行高會設定字型大小相應的倍數。

對於單行文字來說,可以將行高設定為和父元素的高度一致,這樣可以是單行文字在父元素中垂直居中。

在font中也可以指定行高在字型大小後可以新增/行高,來指定行高,該值是可選的,如果不指定則會使用預設值。

示例demo:

doctype html

>

<

html

>

<

head

>

<

meta

charset

="utf-8"

>

<

title

>

title

>

<

style

type

="text/css"

>/**

* line-height如果是證書,值越大,間距越大

*/.p1

.box

.p2

style

>

head

>

<

body

>

<

p class

="p2"

>

人生若只如初見,何事秋風悲畫扇。 等閒變卻故人心,卻道故人心易變。(一作:卻道故心人易變) 驪山語罷清宵半,淚雨霖鈴終不怨。(一作:淚雨零 / 夜雨霖) 何如薄倖錦衣郎,比翼連枝當日願。

p>

<

div

class

="box"

>

<

a href

="#"

>我是乙個超連結

a>

div>

<

p class

="p1"

>

人生若只如初見,何事秋風悲畫扇。 等閒變卻故人心,卻道故人心易變。(一作:卻道故心人易變) 驪山語罷清宵半,淚雨霖鈴終不怨。(一作:淚雨零 / 夜雨霖) 何如薄倖錦衣郎,比翼連枝當日願。

p>

body

>

html

>

結果:

css控制行間距

字型的選用要考慮該文字的用途,是做標題呢,還是段落文字?通常來說 san serif 字型適合作為標題使用,例如 arial serif 字型適合作為段落文字使用,例如time new roman。對於網頁設計來說,有幾個字型是我強烈推薦的,verdana,tahoma,ge ia。事實上,像 ve...

css行間距字間距首字縮排

1.line height設定行間距 html 行間距的設定方法與問題 我們可以用 來設定一段文字內的行距.但我們怎麼設定兩段文字之間的行距呢?即 1 p 一段文字 2 p 第二段文字 之間的行距怎麼設定呢?我可以設成單倍間距嗎?另外,line height 100 是不是就是我們在word中的單倍...

使用CSS設定行間距,字間距

字間距1 text indent設定抬頭距離css縮排 即對,對應div設定css樣式text indent 20px 縮排了20px 2 letter spacing來設定字與字間距 字元間距離,字型間距css樣式 即對對應div設定css屬性樣式為letter spacing 8px 字間距為8...