【CSS】line-heightの単位は必要ない

あれ、line-heightの単位ってなんだっけ？

って思い調べてみる。

メモ

line-heightに単位を指定すると、親要素で計算された値がそのまま子要素にも継承されるため。

	line-height 1.5	line-height 1.5em	line-height 150%
親要素フォントサイズ 20px	30px	30px	30px
子要素フォントサイズ 16px	24px	30px	30px
孫要素フォントサイズ 10px	15px	30px	30px

Author

デザコト

あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。

2020

【CSS】ページ内リンク（アンカーリンク）の位置がズレる、CSSで調整する

あのー、CSSだけで調整できますかー？ CSSだけでも調整できますよー固定ヘッダーで隠れる（ズレる）こんな感じでズレてます。 See the Pen ページ内リンク（アンカーリンク）の位置がズレる（固定ヘッダーで隠れ

...

CSS

デザインのメモ

2019

【CSS】input、textareaのCSSを初期化する（iOS対策）

ちょっとメモですーよく忘れてしまうのでメモですーなぜ初期化？ iOS Safariではのフォーム要素（input,textarea）がデザイン通りにならないとこがあります。iOS Safariのデフォルトスタイルが優

...

CSS

デザインのメモ

2023

【CSS】『shape-outside』でテキストの回り込みを円形にしてみる

文章の回り込みって丸くできないですかー？あー、円形に回り込みですねー、できますよーテキストの回り込みを円形にしてみる floatが必須です。shape-outsideは、円形の『circle()』の他に楕円の『ell

...

CSS

デザインのメモ

Googleさんの
おすすめ

2024

人気記事

2024.3.1

【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）

ん、ハンバーガー？三本線がハンバーガーに見えるからってことらしいですよクリックエフェクトサンプル集いろんなハンバーガーメニューのクリック時のエフェクトを作ってみる。動きがわかりやすいようにゆっくり動くように指定。

...

【CSS】ハンバーガーメニュー実装サンプル集（クリック時のエフェクトも集めました）

CSS

デザインのメモ

2024.2.2

【jQuery】アコーディオン実装サンプル10選

jQueryのアコーディオン実装サンプルを作りました。サイト制作でよく使うものをまとめました。いろいろありますねーいろいろあるのでまとめましたーアコーディオン、シンプル版 See the Pen アコーディオン、シ

...

jQuery

デザインのメモ

2019.9.27

【jQuery】スライダープラグイン「slick」実装サンプル集

slick（スリック）の使い方をまとめてくださいーわかりましたーよく見かけるスライダー（自動再生） See the Pen 【jQuery】スライダープラグイン「slick」よく見かけるスライダー（自動再生） by

...

jQuery slick

デザインのメモ

Googleさんの
おすすめ

2024