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

只對段落p內文字設置字間距,段落<p>是html段落標簽,以<p>開始,以</p>結束,通常文章分段使用p標簽,而有時小局部布局也可以使用p來布局。通過css設置其樣式實現排版目的。

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

一、網頁全局定義設置p的字間距

p{letter-spacing:2px}

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

p{letter-spacing:5px}

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

兩者選其一。

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

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

二、給指定p段落標簽布局內文字設置字間距

方法一:
CSS代碼:

.abc{letter-spacing:5px}

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

任何標簽均可以調用需要間距

p.abc{letter-spacing:5px}

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

關鍵html示例代碼:

<p class=”abc”>指定給p使用class=abc生效的</p>

指定專給p設置字間距css

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

方法二:
給p父級設置字間距,p會繼承父級字間距。
css代碼:

.bbb{ letter-spacing:5px}
 

關鍵的html代碼:

<div class="bbb">
<p>我們之間距離為5px</p>
</div>

效果:

p繼承父級字間距樣式

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

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

?

三、行間距則使用line-height進行設置。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/247465.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/247465.shtml
英文地址,請注明出處:http://en.pswp.cn/news/247465.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

基本數據類型

上節回顧 1.循環打印數列1&#xff0c;3&#xff0c;5&#xff0c;.........&#xff0c;99 for i in range(100):if i%21:print (i) 2.turtle 庫 # penup 抬筆 # pendown 落筆 # pensize 畫筆大小 # pencolor 畫筆顏色## 畫筆運動函數 # fd 前進 # bk 后退 # goto 到達指定的坐…

修改系統默認 alert 彈框樣式

修改默認 alert 彈框&#xff0c;思路很簡單&#xff0c;定義一個 alert(e) 函數&#xff0c;加載最開頭即可。 css部分&#xff1a; <style>#msg{width:266px;position: fixed;z-index:999;top: 49%;margin-top:-80px;left:50%;margin-left:-133px;background:#fff;bo…

Code Review的重要性

這幾天一直在搞一家客戶的產品升級動作&#xff0c;數據的轉移已經完成大部分&#xff0c;因為升級主要的目標是處理性能問題&#xff0c;所以我針對性的對將要升級的版本進行了一些操作性能檢查&#xff0c;真是不做不知道&#xff0c;一做嚇一跳&#xff0c;有一個查詢選擇人…

Myeclipse快捷鍵總結大全

Myeclipse快捷鍵 Ctrl1 快速修復 CtrlD: 刪除當前行 CtrlQ 定位到最后編輯的地方 CtrlL 定位在某行 CtrlO 快速顯示 OutLine CtrlT 快速顯示當前類的繼承結構 CtrlW 關閉當前Editer CtrlK 快速定位到下一個 CtrlE 快速顯示當前Editer的下拉列表 CtrlJ 正向增量查找(按…

秋蟬鳴泣之時

奇怪的題目背景 所誤入的 是回憶的教室 所響起的 是通向絕望的計時器 所到達的 是開始的結束 你 能相信嗎? 題目背景 最近禮奈醬學會了線段樹和樹狀數組兩種數據結構 由于禮奈醬上課聽的很認真&#xff0c;所以她知道 樹狀數組常見的操作是 單點加區間求和 線段樹常見的操作是…

對淺拷貝與深拷貝的研究

淺拷貝只復制指向某個對象的指針&#xff0c;而不復制對象本身&#xff0c;新舊對象還是共享同一塊內存。 淺拷貝的實現方式 Object.assign()&#xff1a;需注意的是目標對象只有一層的時候&#xff0c;是深拷貝Array.prototype.concat()Array.prototype.slice()深拷貝就是在拷…

:nth-child(n)與:nth-of-type(n)為啥顯示不對呢

首先是二者的區別 :nth-child(n) 是選擇父元素的第n個子元素。 :nth-of-type(n) 是選擇父元素的第n個同類型的子元素 舉個例子&#xff1a; <div class"read"><h1>title</h1><p>paragraph1</p><p>paragraph2</p> <!…

css3 box-shadow陰影(內外陰影與發光)講解

基礎說明&#xff1a; 外陰影&#xff1a;box-shadow: X軸 Y軸 Rpx color; 屬性說明&#xff08;順序依次對應&#xff09;&#xff1a; 陰影的X軸(可以使用負值) 陰影的Y軸(可以使用負值) 陰影模糊值&#xff08;大小&#xff09; 陰影的顏色 內陰影&#xff1a;b…

Apress Pro Android 2

Apress Pro Android 2轉載于:https://www.cnblogs.com/gavinhughhu/archive/2010/03/21/1690792.html

Query意圖分析:記一次完整的機器學習過程(scikit learn library學習筆記)

所謂學習問題&#xff0c;是指觀察由n個樣本組成的集合&#xff0c;并根據這些數據來預測未知數據的性質。 學習任務&#xff08;一個二分類問題&#xff09;&#xff1a; 區分一個普通的互聯網檢索Query是否具有某個垂直領域的意圖。假設現在有一個O2O領域的垂直搜索引擎&…

使用 vue-cli 開發多頁應用

修改的webpack配置文件 全局配置 修改 webpack.base.conf.js 打開 ~\build\webpack.base.conf.js &#xff0c;找到entry&#xff0c;添加多入口 entry: {app: ./src/main.js,app2: ./src/main2.js,app3: ./src/main3.js, }, 運行、編譯的時候每一個入口都會對應一個Chunk …

深度學習系統相比較傳統的機器學習系統,針對常見的分類問題,精度究竟能有多大提升?...

來源&#xff1a;知乎原文鏈接&#xff1a;深度學習系統相比較傳統的機器學習系統&#xff0c;針對常見的分類問題&#xff0c;精度究竟能有多大提升&#xff1f; 問題&#xff1a; 我現在手頭有一個binary classification的問題。數據量在一百萬左右。每個sample都是一個14個f…

遠程鏈接錯誤:這可能是由于credssp加密oracle修正

此錯誤解決辦法 1.WinR 輸入regedit打開注冊表 找到對應的以下目錄HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Policies\System 此時如果System下沒有CredSSP時創建CredSSP沒有Parameters時,創建Parameters 創建方法:右建>>新建>>項 2.在Para…

SpringBoot入門最詳細教程

https://www.jianshu.com/p/af3d5800f763 網上有很多springboot的入門教程&#xff0c;自己也因為項目要使用springboot&#xff0c;所以利用業余時間自學了下springboot和springcloud&#xff0c;使用下來發現springboot還是挺簡單的&#xff0c;體現了極簡的編程風格&#xf…

通過Vue CLI3 快速創建Vue項目并部署到tomcat

1、前提 首先你要安裝好nodejs和yarn,直接在官網下載安裝包&#xff0c;一鍵安裝即可&#xff0c;不需要什么環境配置&#xff0c;我安裝的是最新版本&#xff08;node-v10.13.0、yarn-1.12.3&#xff09; 2、安裝 同時寫Vue CLI 3和Vue CLI 2 的原因是官方默認的是3&#x…

簡述區塊鏈(1)- 也許只有這一篇

一、嘮叨兩句 最近一直在考慮一個事情&#xff0c;就是怎么給不太了解技術的人講清楚區塊鏈。我先試著寫下來&#xff0c;然后在逐步打磨吧&#xff0c;目標就是讓哪些說看區塊鏈看的云里霧里的同學能對區塊鏈有一些認知。 二、定義 簡單的給區塊鏈下個定義&#xff1a;基于加密…

Vue CLI 3.0腳手架如何在本地配置mock數據json

前后端分離的開發模式已經是目前前端的主流模式&#xff0c;至于為什么會前后端分離的開發我們就不做過多的闡述&#xff0c;既然是前后端分離的模式開發肯定是離不開前端的數據模擬階段。 我們在開發的過程中&#xff0c;由于后臺接口的沒有完成或者沒有穩定之前我們都是采用…

python 通過下載包setup.py安裝模塊

下載安裝包&#xff0c;并解壓到相應的位置 1、打開cmd 2、到達安裝目錄 3、python setup.py build 4、python setup.py install 轉載于:https://www.cnblogs.com/liuchunxiao83/p/11207340.html

webpack之externals操作三部曲--正確的姿勢

1.作用 首先webpack提供這個externals選項作用是從打包的bundle文件中排除依賴。換句話說就是讓在項目中通過import引入的依賴在打包的時候不會打包到bundle包中去&#xff0c;而是通過script的方式去訪問這些依賴。 2.怎么用&#xff1f; 以jquery為例子&#xff0c;目的是在…

Anaconda3自帶jupyter

1、cmd命令行中輸入 JupyterNotebook 2、系統自動調起下面頁面&#xff08;注冊端口沖突是打不開的&#xff09; 轉載于:https://www.cnblogs.com/liuchunxiao83/p/11207385.html