HTML&CSS基礎-行間距
作者：尹正傑
版權聲明：原創作品，謝絕轉載！否則將追究法律責任。
一.HTML源代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>行間距</title> <style type="text/css"> /** * 在CSS並沒有為我們提供一個直接設置行間距的方式,我們只能通過設置行高來間接的設置行間距，行高越大行間距越大。 * * 使用line-height來設置行高: * 行高類似於我們上學時寫信用的那種紙，信紙上基本上都是一條條紅色的單線將一張紙規划出多行，線與線之間的距離就是行高; * 網頁中的文字實際上也是寫在一個看不見的線中的，而文字會默認在垂直居中顯示。 * * 行間距 = 行高 - 字體大小 * * 通過設置line-height可以間接設置行高，可以接收的值如下: * 1>.直接接收一個大小 * 2>.可以指定一個百分數,則會相對於字體去計算行高 * 3>.可以直接傳入一個正整數,則行高會設置字體大小相應的倍數 * */ .p1{ /** * 通常若不顯示設置字體大小默認是16px */ font-size: 20px; /*line-height: 40px;*/ /*line-height:400% ;*/ line-height: 2; } .box{ width: 200px; height: 200px; background-color: #f0f; /** * 對於單行文本來說，可以將行高設置為和父元素高度一致，這樣可以使單行文本在父元素中垂直居中。 */ line-height: 200px; } .p2{ /** * 在font中也可以指定行高 * 在字體后可以添加行高來指定行高，該值是可選的，如果不指定則會使用默認值的，因此要么不寫行高，要么單獨指定行高時必須在font標簽下面，否則行高屬性會被font的默認行高所覆蓋。 * 語法: * 字體大小/行高 * */ font: 30px/50px "華文彩雲"; } </style> </head> <body> <p class="p1"> 噫吁嚱，危乎高哉！蜀道之難，難於上青天！蠶叢及魚鳧，開國何茫然！爾來四萬八千歲，不與秦塞通人煙。西當太白有鳥道，可以橫絕峨眉巔。地崩山摧壯士死，然后天梯石棧相鈎連。上有六龍回日之高標，下有沖波逆折之回川。黃鶴之飛尚不得過，猿猱欲度愁攀援。青泥何盤盤，百步九折縈岩巒。捫參歷井仰脅息，以手撫膺坐長嘆。問君西游何時還？畏途巉岩不可攀。但見悲鳥號古木，雄飛雌從繞林間。又聞子規啼夜月，愁空山。蜀道之難，難於上青天，使人聽此凋朱顏！連峰去天不盈尺，枯松倒掛倚絕壁。飛湍瀑流爭喧豗，砯崖轉石萬壑雷。其險也如此，嗟爾遠道之人胡為乎來哉！劍閣崢嶸而崔嵬，一夫當關，萬夫莫開。所守或匪親，化為狼與豺。朝避猛虎，夕避長蛇；磨牙吮血，殺人如麻。錦城雖雲樂，不如早還家。蜀道之難，難於上青天，側身西望長咨嗟！ </p> <div class="box"> <a href="#">我是div標簽中的一個超鏈接</a> </div> <p class="p2"> 噫吁嚱，危乎高哉！蜀道之難，難於上青天！蠶叢及魚鳧，開國何茫然！爾來四萬八千歲，不與秦塞通人煙。西當太白有鳥道，可以橫絕峨眉巔。地崩山摧壯士死，然后天梯石棧相鈎連。上有六龍回日之高標，下有沖波逆折之回川。黃鶴之飛尚不得過，猿猱欲度愁攀援。青泥何盤盤，百步九折縈岩巒。捫參歷井仰脅息，以手撫膺坐長嘆。問君西游何時還？畏途巉岩不可攀。但見悲鳥號古木，雄飛雌從繞林間。又聞子規啼夜月，愁空山。蜀道之難，難於上青天，使人聽此凋朱顏！連峰去天不盈尺，枯松倒掛倚絕壁。飛湍瀑流爭喧豗，砯崖轉石萬壑雷。其險也如此，嗟爾遠道之人胡為乎來哉！劍閣崢嶸而崔嵬，一夫當關，萬夫莫開。所守或匪親，化為狼與豺。朝避猛虎，夕避長蛇；磨牙吮血，殺人如麻。錦城雖雲樂，不如早還家。蜀道之難，難於上青天，側身西望長咨嗟！ </p> </body> </html>
二.瀏覽器打開以上代碼渲染結果
