Re: marginとline-heightによる”真の余白”について考える

yoruaki marginとline-heightによる"真の余白"について考える | SimpleIsm より引用

1.5rem(今回の場合は15px)のline-height: 1.8;なので1.8倍で27pxがp要素の行の高さ。そこから自身のテキスト分1.5remを引いてあげた12px分が、均等に上下に割り振られているから、2で割った6pxがテキストの上の部分の余白になる。これを20pxから引いた数字(つまり14px)をh1margin-bottomに指定してあげれば、余白をぴったり20pxにできるという計算。

http://simpleism.net/2015/06/true-margin/

全く間違ってない。ただ,メイリオはブラウザで表示させたときにフォントの中心がインラインボックスの中心には合っていない。以下に図を示す(本当はSVGでゴリゴリ説明を書いていたのだけれど,いつまで経っても完成しなかったのでとりあえず手書きのやつで)。

Meiryoの説明

要するにメイリオはデフォルトだとフォント情報諸々からline-heightが1.5になっているのですがやっかいなことにブラウザは上下の空白から均等に空白を削っていくので,line-height: 1;の時は若干上にはみ出します。その結果がyoruakiさんの例でh1の調整の「整」の字が若干上にはみ出している理由になります。

で,真の20pxの空白とは一体なんなのか考えたときにインラインボックスの下端ではなくてディセンダラインとかベースラインを基準にして考えた方が美しい気がします。計算するとh1は下に約2pxのディセンダラインからはみ出た余白があります。次のpの上には6pxの余白がありますがフォント全体が上に約1px上がっているので実際の余白は約5pxとなります。つまりここではh1margin-bottomには約13pxを指定すると美しい20pxの余白が空くことになります。

とか適当に書きましたけど,フォントなんて環境依存だしブラウザもその辺適当な実装(適当じゃないけど)でごまかされているので,あまりこだわると大変なことになるので普通にline-heightからfont-size引いて2で割るくらいでいいと思います。というかその書き方でちゃんとブラウザがフォントメトリクスに注意して表示するべきだと思います。だいたい仮想ボディとインラインボックスがずれて表示されるとかどうかしてると思います。これだからWindowsは。

ちなみにこのサイトはゆるゆるデザインなので1pxのこだわりとかほとんどないです。検索欄のところくらいです。しかも適当実装状態。

公開日時
2015年6月9日 05時26分44秒
更新日時
2015年6月9日 05時30分06秒
カテゴリ
日記・雑記
タグ
HTML, 組版
トラックバック
トラックバックURI
https://www.hiaism.net/archives/2015/06/re-true-margin/trackback
[ruby]を使うならメイリオはお勧めしない – めも調: 2016年8月6日 17時25分46秒

[…] Re: marginとline-heightによる”真の余白”について考える – ひあ的な生活。 […]

コメント
コメントフォーム
メニュー