css如何設定行間距-css教學-PHP中文網

首頁

web前端

css教學

css如何設定行間距

coldplay.xixi

Apr 29, 2021 pm 02:38 PM

css 行間距

css設定行間距的方法是藉助行高【line-height】來設定行間距，行高【line-height】的值越大，那麼行間距就越高。

css如何設定行間距

本教學操作環境：windows7系統、css3版，DELL G3電腦。

css設定行間距的方法：

首先我們應該知道在css中並沒有直接可以設定行間距的屬性，所以我們就需要借助行高line-height來設定行間距，行高line-height的值越大，那麼行間距就越高。

Line-height的值設定為具體的數值，可以是相對數值，也可以設定為絕對數值，在靜態頁面中，文字大小固定時常常使用絕對數值，而對於論壇和部落格這些使用者可以自訂字體大小的頁面，通常設定為相對數值，從而，可以隨著使用者自訂的字體大小改變相應的行間距。

下面我們就來看看css中利用行高line-height來設定行間距的程式碼範例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            span {
                font-size: 20px;
                line-height: 2em;
            }
        </style>
         
    </head>
    <body>
        <span>
桃之夭夭，灼灼其华。之子于归，宜其室家。<br>
桃之夭夭，有蕡其实。之子于归，宜其家室。<br>
桃之夭夭，其叶蓁蓁。之子于归，宜其家人。
        </span> 
    </body>
</html>

登入後複製

css設定行間距的效果如下：

css如何設定行間距

相關教學推薦：CSS影片教學

以上是css如何設定行間距的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7504

CakePHP 教程

1378

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

bootstrap怎麼調整大小 Apr 07, 2025 pm 03:18 PM

要調整 Bootstrap 中元素大小，可以使用尺寸類，具體包括：調整寬度：.col-、.w-、.mw-調整高度：.h-、.min-h-、.max-h-

bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。