マスターしなければならない CSS 属性 -- lineheight

1. 行の高さの定義

行の高さは、行間の距離、つまりベースライン間の距離を指します。それなのに、なぜ 1 行のテキストにもベースラインが存在するのでしょうか。行の高さ？私たちはこの疑問を念頭に置いて見下ろします。

2、インラインボックスボックスモデル

e388a4556c0f65e1904146cc1a846beeこれは単一行のテキストであり、45a2772a6b6107b401db3c9b82c049c2コンテンツエリア54bdf357c58b8a65c66d7c19c8e4d114があります。 94b3e26ee717c64999d7867364b1b4a3

図1

「コンテンツエリア」(コンテンツエリア)は、マウスで選択されたテキストエリアのサイズと考えることができます。そのサイズは font-size にのみ関係しており、図 1 のテキストがマウスで選択されている領域、つまり「単一行のテキスト」が選択されている領域として見ることができます。

「インラインボックス」(インラインボックス)は、テキストをブロック単位で表示するのではなく、連続して表示します。また、spanタグなどのinline要素で囲まれた「コンテンツ領域」を「インラインボックス」、inline要素で囲まれていない部分を「匿名インラインボックス」とみなすことができます。 「インラインボックス」は図1のspanタグ内の「コンテンツエリア」領域として、「匿名インラインボックス」は赤い点線で囲まれたコンテンツとして見ることができます。

「ラインボックス」(ラインボックス)、各ラインは「ラインボックス」であり、ラインボックスボックスは匿名インラインボックスと非匿名インラインボックスで構成されます。これは、図 1 の最も外側の赤い実線で囲まれた領域として確認できます。

「Containing box」(containing box)、このボックスは「ラインボックスボックス」で構成されています。

3. 行の高さのメカニズム

行の高さの影響はどこにでもあり、単一行のテキストであっても例外ではありません。

テキストの 1 行の高さのパフォーマンスは line-height によってのみ影響を受けますが、主にコンテンツ領域と行間隔によって影響されます。

単一行のテキスト行の高さ:

line-height = コンテンツ領域の高さ + 行間隔の高さ

次に:

行間隔 = line-height - コンテンツ領域の高さ

通常、テキストの上部と「line box box」 の頂点間の距離は半行間隔です。

4 ピクセルには固定値がありますが、残りの値はブラウザのデフォルトのサイズに基づいて変換するか、本文の font-size プロパティを使用して計算する必要があります。

(3)

line-height:2;
font-size:20px;

すると、子要素に基づいて行の高さを再計算することなく、「テキストテキスト」の行の高さは30pxになり、内部のpタグの行の高さも30pxになります。

これは、行の高さがパーセンテージとして設定されている場合、 font-size に基づいて計算された親要素の行の高さが子要素に継承

され、子要素は font-size に基づいて行の高さを再計算しません。これは一般的にはあまり使用されません。

(4)、normal

は、ブラウザのデフォルトの line-height プロパティに従って行の高さを設定します。

(5)、継承

行の高さは IE8+ を継承します

親要素の行の高さの設定を継承します。これは通常、一部の input タグと button タグに適用されます。

5、行の高さの適用

(1)、

画像

とコンテナ内の底部との間の距離を排除します

画像2

原因:

のデフォルトのベースライン配置インライン要素、空白 ラベルには空白のゴースト ノードが含まれています。これは、vertical-align

:baseline に従って画像をテキストと位置合わせするのと同等であるため、画像の下部にギャップが生じます。

ここでゴースト空白ノードは文字 c として理解できます。これはベースラインに位置合わせされており、親要素は固定の高さを設定していないため、c に位置合わせする必要があるため、親要素の高さはコンテンツによって埋められます。画像のベースラインの場合、下端になります。

親要素が固定高に設定されている場合、単純な p には画像と文字 c が含まれます。デフォルトでは、画像はテキストのベースラインに合わせて配置されます。図 3 では、c はゴースト空白ノードに相当します。

写真3

解消方法

1、画像をブロック状にする

2、画像の縦揃え:

下

3，让匿名空白节点line-height:0

(2)，小图标大文字

<i class=&#39;icon&#39;></i>
<span>这是span标签内的文字</span>
span{
line-height:30px;
vertical-align:middle;
}
i{
vertical-align:middle;
}

(3)，图片水平垂直居中

图三

图四

原理：

空白p内存在空白幽灵节点(看不见摸不着但存在空白元素中，例如图四中的)。

当设置text-align的时候，内联元素文字和图片会居中显示，我们让空白幽灵节点的行高与p高度一致，这样就可以实现垂直居中，图片和幽灵空白节点默认基线对齐，这时图片将偏上显示，我们设置图片的vertical-align为middle就可以实现图片近似居中的效果了。

如果想让图片完全垂直居中，我们可以让p的font-size:0，原因是不同字体的显示效果不同，有的下沉，有的刚好中线对齐，当font-size:0的时候，文字就变成一个点了，也就不存在不同字体的差异了。

(4)，多行文本垂直居中

图五

图六

原理：

我们可以把span看做是图片，这样原理就和图片垂直居中原理大同小异了。就是需要将span的元素display设置成inline-block，并且重置line-height和text-align。

为何display不能是inline属性，个人观点，如果还是inline元素的话，由于此时父元素的line-height过高，子元素设置的行高很小就没有作用（因为line-height达不到父元素行高的高度，所以看上去好像是无效的），类似于margin中的由于浮动或者绝对定位的无效的原因，我在另外margin篇有介绍，css中margin的深入了解，如果有兴趣可以去看看，如果设置子元素line-height设置很大的话是有作用的，所以只能让span元素为inline-block元素，inline-block具有包裹性,所以呈现出图六效果。

如果容器是自适应高度的，无法获得高度，那么我们可以让外部容器为表格元素居中。

【相关推荐】

1. 免费css在线视频教程

2. css在线手册

3. php.cn独孤九贱（2）－css视频教程

以上がマスターしなければならない CSS 属性 -- lineheightの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。