css怎麼設定行高-css教學-PHP中文網

首頁

web前端

css教學

css怎麼設定行高

青灯夜游

Apr 02, 2021 pm 02:27 PM

css 幸高

在css中，可以使用line-height屬性來設定行高，只需要給指定元素添加“line-height:行高值;”樣式即可，例如“line-height: 10px;” 。 line-height屬性可以設定行間的距離（行高），不允許使用負值。

css怎麼設定行高

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

所謂行高是指文本行基線間的垂直距離。要理解這句話首先得了解幾個基本知識：

頂線、中線、基線、底線

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <style type="text/css" >
            span
            {
                padding:0px;
                line-height:1.5;
            }
        </style>
    </head>
    <body>
        <div class="test">
            <div style="background-color:#ccc;">
                <span style="font-size:3em;background-color:#999;">中文English</span>
                <span style="font-size:3em;background-color:#999;">English中文</span>
            </div>
        </div>
    </body>
<html>

登入後複製

css怎麼設定行高

從上到下四條線分別是頂線、中線、基線、底線，很像才學英文字母時的四線三格，我們知道vertical-align屬性中有top、middle、baseline、bottom ，就是和這四條線相關。

尤其記得基準不是最下面的線，最下面的是底線。

行高、行距與半行距

#行高是指上下文本行的基準間的垂直距離，即圖中兩條紅線間垂直距離。

行距是指一行底線到下一行頂線的垂直距離，即第一行粉線和第二行綠線間的垂直距離。

半行距是行距的一半，即區域3垂直距離/2，區域1，2，3，4的距離總和為行高，而區域1，2，4距離總和為字體size，所以半行距也可以這麼算：（行高-字體size）/2

css怎麼設定行高

#內容區、行內框、行框

內容區：底線和頂線包裹的區域，即下圖深灰色背景區域。

css怎麼設定行高

行內框，每個行內元素會產生一個行內框，行內框是一個瀏覽器渲染模型中的一個概念，無法顯示出來，在沒有其他因素影響的時候（padding等），行內框等於內容區域，而設定行高時行內框高度不變，半行距【（行高-字體size）/2】分別增加/減少到內容區域的上下兩邊（深藍色區域）

行框（line box），行框是指本行的一個虛擬的矩形框，是瀏覽器渲染模式中的一個概念，並沒有實際顯示。行框高度等於本行內所有元素中行內框最大的值（以行高值最大的行內框為基準，其他行內框採用自己的對齊方式向基準對齊，最終計算行框的高度），當有多行內容時，每行都會有自己的行框。

<div   style="max-width:90%">
                <span style="font-size:1em;background-color:#666;">中文English</span>
                <span style="font-size:3em;background-color:#999;">中文English</span>
                <span style="font-size:3em;background-color:#999;">English中文</span>
                <span style="font-size:1em;background-color:#666;">English中文</span>
            </div>

登入後複製

css怎麼設定行高

（學習影片分享：css影片教學）

line-height

基本概念搞清楚了我們就可以說說本文的主角line-height屬性了。

定義：line-height 屬性設定行間的距離（行高），且不能使用負值。此屬性會影響行框的佈局。在應用到一個區塊級元素時，它定義了該元素中基線之間的最小距離而不是最大距離。 line-height 與 font-size 的計算值之差(行距)分為兩半，分別加到一個文字行內容的頂部和底部。可以包含這些內容的最小框就是行框。

可能的值

值	说明
normal	默认,设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。相当于倍数
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

示例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style type="text/css">
			p.small {
				line-height: 90%
			}
			
			p.big {
				line-height: 200%
			}
		</style>
	</head>

	<body>

		<p>
			这是拥有标准行高的段落。 在大多数浏览器中默认行高大约是 110% 到 120%。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。
		</p>

		<p class="small">
			这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。
		</p>

		<p class="big">
			这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。
		</p>

	</body>

</html>

登入後複製

效果图：

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 的網格系統、組件和样式創建響應式網站和應用程序。