p字間距 html段落內文字設定字間距間隔

2021-09-04 10:19:56 字數 1298 閱讀 6763

只對段落p內文字設定字間距,段落是html段落標籤,以開始,以

結束,通常文章分段使用p標籤,而有時小區域性布局也可以使用p來布局。通過css設定其樣式實現排版目的。

這裡針對p設定字間距,使用letter-spacing《css 字間距》屬性實現,其屬性單詞值為具體數字+單位(整數)。

p
設定p段落內文字間隔間距為2px。

p
設定p段落內文字間隔間距為5px。

兩者選其一。

以上兩種值對p內文字(無論中文漢字、英文單詞字母、數字、符號都適用生效)設定字與字之間間距。

根據布局切圖重構經驗很少遇到對整個網頁p初始化全域性設定字間距樣式,一般小區域性小布局,或需要地方才設定文字之間需要間隔距離。

方法一:

css**:

.abc
大家都可以使用class=abc均生效,如div、span、li、h1、h2、h3都能生效。

p.abc
指定p標籤使用class=abc此生效

關鍵html示例**:

指定給p使用class=abc生效的

解釋:.abc和p.abc

都是定義選擇器,但p.abc代表只有p標籤才能使用,其它標籤使用不能生效。而只有.abc{}的定義後任何標籤都可以使用,也包括p標籤。

方法二:

給p父級設定字間距,p會繼承父級字間距。

css**:

.bbb
關鍵的html**:

我們之間距離為5px

效果:

解釋:這裡雖然p沒有被直接設定字間距letter-spacing css,但對其父級設定,而p繼承了父級設定字型內容排版樣式,依然是成功的。

以上兩種方法,均能對p段落設定文字之間間距,都看div css布局時候選擇適合的,平時也都使用使用,熟能生巧自然會快速選擇適合專案的css布局方式。

css 設定字間距 字母間距和漢子間距

下面是沒有設定間距的漢字和字母 順昌人 this is a test 下面是設定50px的word spacing字間距 順昌人 this is a test 下面是設定50px的letter spacing字母間距 順 昌 人 t h i s i s a t e s t 重要 letter spa...

iOS設定富文字行間距 字間距

我們在展示文字資訊時,經常會碰到換行自適應高度的文字,這時我們會發現換行之後,文字之間的行間距依然很小,導致看起來很擁擠,影響美觀。因此以下 就是來解決這些問題,新建乙個nsstring的類別,貼出如下 1 調整行間距,字間距 設定行間距和字間距 param string 字串 param line...

css設定字間距和字母間距 中文漢字間距

下面是沒有設定間距的漢字和字母 順昌人 this is a test 下面是設定50px的word spacing字間距 順昌人this is a test 下面是設定50px的letter spacing字母間距 順 昌 人 t h i s i s a t e s t 重要 letter spac...