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のこだわりとかほとんどないです。検索欄のところくらいです。合格したLPI-JapanがHTML5プロフェッショナル認定試験とかやっていたので,これは勉強しなくても受かりそうとか思い,先々週適当に受けに行ったら普通に落ちました。HTML4」があったなと思い読んだらすごく分かりやすかったので,HTML5プロフェッショナル認定試験受ける人はこれ読んだ方がいいと思いました。その辺の参考書とか読むよりわかるし何より私はこれのおかげで合格しました。要するにW3Cの仕様書読めということです。あと改行せずにだらだら長い文を書くのはやめよう。JavaScriptよく分からないのでLv.2は勉強しないと受かる気がしない。(function(){})();するだけで合格出来ないのだろうかとか思ったりする(謎)。href="#top">TOP</a></p>(中略)で、ここからが本題。背景画像の配置を右から指定する方法。none;}デモとかそういうものはないので各自で確認して下さい。あとこのサイトのスタイルシートが手抜きなのでコード用のスタイルとか指定していないので見にくくてすみません。12.14で確認して問題ないような気がしたので。9はlinear-gradient以外はその通りに表示されると思う。Windowsに行って確認するのが面倒なので気が向いたら後でやる。あとどうでもいい解説。問題のbackground-positionだけどcalc使うなら別にわざわざ:afterしなくても<length>のある場所ならどこでもいいとか書いてあったのでここに直接書けばいいんじゃないかなとか思ってやってみたらなんか動いたのでいいような気がする。正確なところは知らない。あとはFirefoxが4値構文に13から対応したとMDNに書いてあったのでcalcしなくても動くと思う。9+)に適用させてやればいい。4.2とか)はそもそもcalcに対応していなかったのでこのままでは表示ができなかった。9に関してはlinear-gradientがあるためその行が解釈されず無視されるため背景が白く抜ける。対策については後で考える。追記2最近利用者の多いAndroid端末を切り捨てるわけにもいかないので,結局:afterを使わないとダメっぽい。5.1などではcalcが使えないのでそれを使わずに書くとこんな感じになると思う。relative;するのが嫌だみたいな特殊な人にはたぶんこれでも動くと思う。確認はしたけれど1pixelも動かない保証はない。11px;}とりあえずこのスタイルがなんでそういう表示になるかの解説はもう省略。あと後者のスタイルはフィーリングで書いたので何でこの表示になるのか自分でもよくわかってないから説明のしようがない。IEで白く抜けるので背景色指定した方がいいかもしれないしもしくはlinear-gradientの使用を取りやめて画像を使う。