CSS では、line-height 属性を使用して行の高さを設定できます。指定した要素に「line-height: line height value;」スタイルを追加するだけです (例: 「line-高さ: 10px;" . line-height 属性は行間の距離 (行の高さ) を設定でき、負の値は許可されません。
このチュートリアルの動作環境: Windows 7 システム、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>
上から下の 4 つの線は、トップ ライン、ミドル ライン、ベースライン、ボトム ラインであり、英語の文字を学習するときの 4 つの線と 3 つのスペースに非常に似ています。 vertical-align 属性には、top、middle、baseline、bottom が含まれており、これら 4 つの行に関連しています。
特に、ベースラインは収益ではなく、収益は収益であることを覚えておいてください。
行の高さ、行間隔、半行間隔
行の高さは、ベースライン間の垂直距離を指します。コンテキスト ライン 、つまり図の 2 本の赤い線の間の垂直距離。
行間隔は、ある行の一番下の行から次の行の一番上の行までの垂直距離、つまり、最初の行のピンクの線と、最初の行のピンクの線との間の垂直距離を指します。 2行目の緑の線です。
半行間隔は行間隔の半分、つまり領域3/2の垂直方向の距離であり、領域1、2、3、4の距離の合計は次のようになります。行の高さと領域 1、2、4 距離の合計がフォント サイズになるため、半行間隔は次のように計算することもできます: (行の高さ - フォント サイズ)/2
コンテンツエリア、インラインボックス、ラインボックス
コンテンツエリア: 一番下の行と上の行、つまり、下の図の濃い灰色の背景の領域です。
インライン ボックス、各インライン要素はインライン ボックスを生成します。インライン ボックスはブラウザー レンダリング モデルの概念であり、表示できません。他の要素 (パディングなど) がない場合、インライン ボックスはコンテンツ領域と等しくなります。行の高さが設定されている場合、インライン ボックスの高さは変更されず、半行間隔 [(行の高さ-文字サイズ)/2]で内容に合わせてそれぞれ増減します エリア(紺色のエリア)の上下は
ラインボックス(ラインボックス)、ラインボックスとはこの行の仮想的な長方形ボックスへの「」はブラウザのレンダリングモードにおける概念であり、実際には表示されません。行ボックスの高さは、この行のすべての要素の中でのインライン ボックスの最大値と等しくなります (行の高さの値が最も大きいインライン ボックスがベンチマークとして使用され、他のインライン ボックスは独自の値を使用してベンチマークに揃えられます)行ボックスの高さが最終的に計算されます) 複数の行コンテンツがある場合、各行には独自の行ボックスが存在します。
<div> <span>中文English</span> <span>中文English</span> <span>English中文</span> <span>English中文</span> </div>
（学習ビデオ共有: css ビデオ チュートリアル ）
line-height
#基本的な概念が明確になったので、この記事の主役である line-height 属性について説明します。 定義: line-height 属性は行間の距離 (行の高さ) を設定し、負の値は使用できません。このプロパティは、ライン ボックスのレイアウトに影響します。ブロックレベルの要素に適用すると、その要素内のベースライン間の最大距離ではなく、最小距離が定義されます。 line-height と font-size (行間) の計算値の差は 2 つに分割され、それぞれテキスト コンテンツの行の上部と下部に追加されます。このコンテンツを含めることができる最小のボックスはライン ボックスです。可能な値
| 值 | 说明 |
| 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で行の高さを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
毎週のプラットフォームニュース：Galaxy Store、Tappable Stories、CSS SubgridのWebアプリApr 14, 2025 am 11:20 AM今週のラウンドアップ：Firefoxは錠前屋のような力を獲得し、Samsung＆＃039; s Galaxy StoreがプログレッシブWebアプリをサポートし始め、CSS SubgridはFirefoxで出荷しています
毎週のプラットフォームニュース：インターネットエクスプローラーモード、検索コンソールの速度レポート、通知プロンプトの制限Apr 14, 2025 am 11:15 AM今週のラウンドアップ：Internet ExplorerがEdgeに進み、Google Search Consoleが新しい速度レポートを宣伝し、FirefoxがFacebookの通知を提供します
CSSカスタムプロパティを使用したスコープのパワー（および楽しい）Apr 14, 2025 am 11:11 AMおそらく、CSS変数に少なくとも少し精通しているでしょう。そうでない場合は、ここに2秒の概要があります：それらは本当にカスタムプロパティと呼ばれます、あなたは設定します
私たちはプログラマーですApr 14, 2025 am 11:04 AM建物のウェブサイトはプログラミングです。 HTMLとCSSの作成はプログラミングです。私はプログラマーです。ここでCSS-Tricksを読んでいる場合、あなたは＆＃039;
サイトから未使用のCSSをどのように削除しますか？Apr 14, 2025 am 10:59 AMここに＆＃039;私が前もって知るのが好きなこと：これは難しい問題です。あなたがここに上陸した場合、あなたはあなたが伝えることができるツールを指し示すことを望んでいるので、あなたが＆＃039;
ピクチャーインピクチャーWeb APIの紹介Apr 14, 2025 am 10:57 AMPicture-in-Pictureは、2016年にMacos SierraをリリースしたSafariブラウザでWebに初めて登場しました。ユーザーがポップできるようになりました。
ギャツビーを使用してぼやけた効果のために画像を整理して準備する方法Apr 14, 2025 am 10:56 AMGatsbyは、画像の処理と処理の素晴らしい仕事をしています。たとえば、手動で画像の最適化で時間を節約するのに役立ちます
ああ、パディングの割合は親要素の幅に基づいていますApr 14, 2025 am 10:55 AM私は今日、私の頭の中で完全に間違っていたことをパーセンテージベース（％）のパディングについて学びました！パディングの割合はに基づいているといつも思っていました
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
ドリームウィーバー CS6
ビジュアル Web 開発ツール
VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター
Dreamweaver Mac版
ビジュアル Web 開発ツール
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
SAP NetWeaver Server Adapter for Eclipse
Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。
