1.5rem(今回の場合は15px)の
line-height: 1.8;
なので1.8倍で27pxがp
要素の行の高さ。そこから自身のテキスト分1.5remを引いてあげた12px分が、均等に上下に割り振られているから、2で割った6pxがテキストの上の部分の余白になる。これを20pxから引いた数字(つまり14px)をh1
のmargin-bottom
に指定してあげれば、余白をぴったり20pxにできるという計算。
全く間違ってない。ただ,メイリオはブラウザで表示させたときにフォントの中心がインラインボックスの中心には合っていない。以下に図を示す(本当はSVGでゴリゴリ説明を書いていたのだけれど,いつまで経っても完成しなかったのでとりあえず手書きのやつで)。
要するにメイリオはデフォルトだとフォント情報諸々からline-height
が1.5になっているのですがやっかいなことにブラウザは上下の空白から均等に空白を削っていくので,line-height: 1;
の時は若干上にはみ出します。その結果がyoruakiさんの例でh1
の調整の「整」の字が若干上にはみ出している理由になります。
で,真の20pxの空白とは一体なんなのか考えたときにインラインボックスの下端ではなくてディセンダラインとかベースラインを基準にして考えた方が美しい気がします。計算するとh1
は下に約2pxのディセンダラインからはみ出た余白があります。次のp
の上には6pxの余白がありますがフォント全体が上に約1px上がっているので実際の余白は約5pxとなります。つまりここではh1
のmargin-bottom
には約13pxを指定すると美しい20pxの余白が空くことになります。
とか適当に書きましたけど,フォントなんて環境依存だしブラウザもその辺適当な実装(適当じゃないけど)でごまかされているので,あまりこだわると大変なことになるので普通にline-height
からfont-size
引いて2で割るくらいでいいと思います。というかその書き方でちゃんとブラウザがフォントメトリクスに注意して表示するべきだと思います。だいたい仮想ボディとインラインボックスがずれて表示されるとかどうかしてると思います。これだからWindowsは。
ちなみにこのサイトはゆるゆるデザインなので1pxのこだわりとかほとんどないです。検索欄のところくらいです。しかも適当実装状態。
2015年6月9日 05時26分44秒 | カテゴリ: 日記・雑記 | タグ: HTML, 組版 | コメント(0) | トラックバック(1)
佐藤さん、こんにちは 。また下ネタですか。上記のように1文字目に”。”がくることもあるけれど、それはその人の環境下での話だから仕方ない。ともかく、そうやってブラウザで適宜改行される改行は美しいとさえ感じる。
ある意味美しさを感じているもかもしれませんね。気持ちはわかります。
仕方ないかもしれないけど,でも携帯でも何でも日本語を表示する機械は禁則処理をちゃんとやれ。外国の携帯とか英文をワードラップするやつとかかなりあるのに。
あとこのサイトになって初めて引用した。blockquote
の周りとかスタイルとか全くいじってないのでそのうち何とかする。
2009年1月31日 00時28分36秒 | カテゴリ: 日記・雑記 | タグ: CSS, HTML, Web, 図, 日本語, 組版 | コメント(0) | トラックバック(0)