ホームページ ウェブフロントエンド htmlチュートリアル line-height_html/css_WEB-ITnose について話しましょう

line-height_html/css_WEB-ITnose について話しましょう

Jun 24, 2016 am 11:20 AM

このスタイルの行の高さは誰もがよく知っていると思います。テキストを上下に中央揃えするためによく使用されます。これは通常、問題を引き起こしませんが、この属性にあまり慣れていない場合は問題が発生する可能性があります。いくつかの落とし穴に足を踏み入れると、私は今日それを個人的にテストし、行の高さのいくつかの特徴をまとめました。

まず、line-heightには以下のような標準的な書き方があります:

書き方1, line-height:normal; / /line-height=font-size*1.5

書き方5. line-height: 1.5; 、図に示すように:

親要素が行の高さを設定し、子要素が行の高さを設定しない場合、子要素は line- を使用することがわかります。子要素の font-height に関係なく、親要素で設定された高さは、サイズがどんなに大きくても行の高さは変更されないため、子要素の font-size > 親要素の line-height, font の場合は、行の高さは変更されません。オーバーラップしたり、その他の不要なスタイルが表示されたりする可能性があります。

次に、書き方 4 と 5 は、以下に示すように同じように見えますが、異なります。

上記 2 つの書き方は、図に示すように、同じ効果が得られます。 :

今度は子要素のフォント サイズを 2 倍にします

行の高さはパーセンテージで設定されます、

line-height = 200%* 親要素 font-size = 32px

、子要素の行の高さは変わりません結果、フォントが重なります

数値で設定された行の高さにより、子要素の行の高さが再計算されます、

line-height=親要素の行の高さ比率*子要素のfont-size= 2*64=128px;

子要素の行の高さはRecalculateになります

以下の点をまとめると

Line-heightは継承されます。

要素がピクセル値 px または em に等しい line-height を設定すると、その子要素 ​​(行の高さが設定されていない子要素) は親要素の line-height を採用し、それ自体の line-height は変更されません。フォントサイズが大きいため、行が表示されます。

Line-height は、親要素の設定方法に基づいて、自身の行の高さを再計算するかどうかを決定します。つまり、書き方4と5の違いです ここまでで行の高さについてはある程度理解できたと思います

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

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? 公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は? Mar 04, 2025 pm 12:32 PM

公式アカウントのキャッシュの更新の難しさ:バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は?

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか? Mar 17, 2025 pm 12:27 PM

HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか?

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? < iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか? Mar 20, 2025 pm 06:05 PM

< iframe>の目的は何ですか タグ?使用する際のセキュリティ上の考慮事項は何ですか?

WebページのPNG画像にストローク効果を効率的に追加する方法は? WebページのPNG画像にストローク効果を効率的に追加する方法は? Mar 04, 2025 pm 02:39 PM

WebページのPNG画像にストローク効果を効率的に追加する方法は?

< meter>の目的は何ですか 要素? < meter>の目的は何ですか 要素? Mar 21, 2025 pm 12:35 PM

< meter>の目的は何ですか 要素?

< datalist>の目的は何ですか 要素? < datalist>の目的は何ですか 要素? Mar 21, 2025 pm 12:33 PM

< datalist>の目的は何ですか 要素?

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか? Mar 20, 2025 pm 05:56 PM

ビューポートメタタグとは何ですか?レスポンシブデザインにとってなぜそれが重要なのですか?

IFramesを使用することのセキュリティへの影響は何ですか?また、どのようにそれらを軽減できますか? IFramesを使用することのセキュリティへの影響は何ですか?また、どのようにそれらを軽減できますか? Mar 18, 2025 pm 02:51 PM

IFramesを使用することのセキュリティへの影響は何ですか?また、どのようにそれらを軽減できますか?

See all articles