小編給大家分享一下css如何設置間距,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
10多年的白朗網站建設經驗,針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務,響應快,48小時及時工作處理。成都全網營銷推廣的優(yōu)勢是能夠根據(jù)用戶設備顯示端的尺寸不同,自動調整白朗建站的顯示方式,使網站能夠適用不同顯示終端,在瀏覽器中調整網站的寬度,無論在任何一種瀏覽器上瀏覽網站,都能展現(xiàn)優(yōu)雅布局與設計,從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“白朗網站設計”,“白朗網站推廣”以來,每個客戶項目都認真落實執(zhí)行。
css是一種用來表現(xiàn)HTML或XML等文件樣式的計算機語言,主要是用來設計網頁的樣式,使網頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言,并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單文件中,而樣式規(guī)則的優(yōu)先級由css根據(jù)這個層次結構決定,從而實現(xiàn)級聯(lián)效果,發(fā)展至今,css不僅能裝飾網頁,也可以配合各種腳本對于網頁進行格式化。
css設置間距的方法:1、使用letter-spacing屬性設置字間距;2、使用line-height屬性設置行間距,即行高;3、使用margin或padding屬性設置段落間距或元素之間的距離。
本教程操作環(huán)境:windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
1、使用letter-spacing屬性設置字間距
letter-spacing 屬性增加或減少字符間的空白(字符間距)。
該屬性定義了在文本字符框之間插入多少空間。由于字符字形通常比其字符框要窄,指定長度值時,會調整字母之間通常的間隔。因此,normal 就相當于值為 0。
注釋:允許使用負值,這會讓字母之間擠得更緊。
示例:
css設置字間距 創(chuàng)新互聯(lián)
創(chuàng)新互聯(lián)
創(chuàng)新互聯(lián)
效果圖:
2、使用line-height屬性設置行間距
line-height屬性可以設置行間的距離(行高)。
注:不允許使用負值。
說明
該屬性會影響行框的布局。在應用到一個塊級元素時,它定義了該元素中基線之間的最小距離而不是最大距離。
line-height 與 font-size 的計算值之差(在 CSS 中成為“行間距”)分為兩半,分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。(學習視頻分享:css視頻教程)
原始數(shù)字值指定了一個縮放因子,后代元素會繼承這個縮放因子而不是計算值。
示例:
使用數(shù)值來設置行間距 這是擁有標準行高的段落。 默認行高大約是 1。 這是擁有標準行高的段落。 這是擁有標準行高的段落。 這是擁有標準行高的段落。 這是擁有標準行高的段落。 這是擁有標準行高的段落。
這個段落擁有更小的行高。 這個段落擁有更小的行高。 這個段落擁有更小的行高。 這個段落擁有更小的行高。 這個段落擁有更小的行高。 這個段落擁有更小的行高。 這個段落擁有更小的行高。
這個段落擁有更大的行高。 這個段落擁有更大的行高。 這個段落擁有更大的行高。 這個段落擁有更大的行高。 這個段落擁有更大的行高。 這個段落擁有更大的行高。 這個段落擁有更大的行高。
效果圖:
3、使用margin或padding屬性設置段落間距
margin可以設置元素的外邊距,padding可以設置元素的內邊距。
示例:
第一段
第二段
第三段
第四段
第一段
第二段
第三段
第四段
第一段
第二段
第三段
第四段
效果圖:
看完了這篇文章,相信你對“css如何設置間距”有了一定的了解,如果想了解更多相關知識,歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!