新ブログ「文字の雑貨店」
文字グッズの陳列棚サイト「文字の雑貨店」始めました。
Introducing items related to the letter—I have just opened a website “The Moji Shop”.
Introducing items related to the letter—I have just opened a website “The Moji Shop”.
CSSボタンでテキストを天地中央に揃えるとき、なぜボタン高と行高を一緒にするのか
表題の件が気になり調べたものを共有した方がイイかなと思い公開してみる。 自身の中でまだよく噛み砕けていないので判りづらい箇所があるかと思うが、そこはご寛恕を。 参考 Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification（日本語訳） Eric A. Meyer著. 株式会社クイープ訳. CSS完全ガイド第2版 . オライリージャパン, 2010 インライン要素とは何か 文書構造を構成するブロックレベル要素内の特定箇所にある特定の機能や論理的な意味を付加する要素をいう。それ自身の前後に改行を生成しない。例としては、a要素、em要素、span要素など。 インライン要素には非置換要素と置換要素とがある。今回は置換要素には触れない（置換要素の代表例はimg要素）。 非置換要素とは何か 要素に囲まれた内容がそのまま表示される要素。HTMLやXHTMLの要素の大半は非置換要素である。 インライン非置換要素の特徴 widthとheightは適用されない。 背景はコンテンツエリアとpaddingに適用される。 上下marginは、事実上適用されない。 左右paddingは、要素の先頭と末尾のみに適用される。 上下paddingは、要素の背景を上下に伸ばすが、行の高さに影響しないため、背景色がある場合は上下の行（実際は上の行）に重なってしまう。 line-heightは何を制御しているか 行高を指定するline-heightは単純に行間を制御しているのではなく、 leadingという、コンテンツエリアの上下にある余白を制御 している。 leadingはline-heightとfont-sizeとの差 であり、 この差を等分 して コンテンツエリアの上下に加えることによって行間が決まる （コンテンツエリア＋leadingをインラインボックスという）。 コンテンツエリアとは、インライン非置換要素では、要素内の全ての文字を繋ぎ合わせたボックスでfont-sizeの値と同じ高さになる。 図解すると以下の通り。 つまり、line-heightが設定され
コメント
コメントを投稿