ホームページ > 記事 > ウェブフロントエンド > CSSで行の高さを設定する方法
CSSで行の高さを設定する方法
- 青灯夜游オリジナル
- 2021-04-02 14:27:3110347ブラウズ
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 サイトの他の関連記事を参照してください。