在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...