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