ホームページ  >  記事  >  ウェブフロントエンド  >  CSSで行の高さを設定する方法

CSSで行の高さを設定する方法

青灯夜游
青灯夜游オリジナル
2021-04-02 14:27:3110380ブラウズ

CSS では、line-height 属性を使用して行の高さを設定できます。指定した要素に「line-height: line height value;」スタイルを追加するだけです (例: 「line-高さ: 10px;" . line-height 属性は行間の距離 (行の高さ) を設定でき、負の値は許可されません。

CSSで行の高さを設定する方法

このチュートリアルの動作環境: 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>

CSSで行の高さを設定する方法

上から下の 4 つの線は、トップ ライン、ミドル ライン、ベースライン、ボトム ラインであり、英語の文字を学習するときの 4 つの線と 3 つのスペースに非常に似ています。 vertical-align 属性には、top、middle、baseline、bottom が含まれており、これら 4 つの行に関連しています。

特に、ベースラインは収益ではなく、収益は収益であることを覚えておいてください。

行の高さ、行間隔、半行間隔

行の高さは、ベースライン間の垂直距離を指します。コンテキスト ライン 、つまり図の 2 本の赤い線の間の垂直距離。

行間隔は、ある行の一番下の行から次の行の一番上の行までの垂直距離、つまり、最初の行のピンクの線と、最初の行のピンクの線との間の垂直距離を指します。 2行目の緑の線です。

半行間隔は行間隔の半分、つまり領域3/2の垂直方向の距離であり、領域1、2、3、4の距離の合計は次のようになります。行の高さと領域 1、2、4 距離の合計がフォント サイズになるため、半行間隔は次のように計算することもできます: (行の高さ - フォント サイズ)/2

CSSで行の高さを設定する方法

コンテンツエリア、インラインボックス、ラインボックス

コンテンツエリア: 一番下の行と上の行、つまり、下の図の濃い灰色の背景の領域です。

CSSで行の高さを設定する方法

インライン ボックス、各インライン要素はインライン ボックスを生成します。インライン ボックスはブラウザー レンダリング モデルの概念であり、表示できません。他の要素 (パディングなど) がない場合、インライン ボックスはコンテンツ領域と等しくなります。行の高さが設定されている場合、インライン ボックスの高さは変更されず、半行間隔 [(行の高さ-文字サイズ)/2]で内容に合わせてそれぞれ増減します エリア(紺色のエリア)の上下は

ラインボックス(ラインボックス)、ラインボックスとはこの行の仮想的な長方形ボックスへの「」はブラウザのレンダリングモードにおける概念であり、実際には表示されません。行ボックスの高さは、この行のすべての要素の中でのインライン ボックスの最大値と等しくなります (行の高さの値が最も大きいインライン ボックスがベンチマークとして使用され、他のインライン ボックスは独自の値を使用してベンチマークに揃えられます)行ボックスの高さが最終的に計算されます) 複数の行コンテンツがある場合、各行には独自の行ボックスが存在します。

<div>
                <span>中文English</span>
                <span>中文English</span>
                <span>English中文</span>
                <span>English中文</span>
            </div>

CSSで行の高さを設定する方法

(学習ビデオ共有: 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で行の高さを設定する方法

更多编程相关知识,请访问:编程视频!!

以上がCSSで行の高さを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。