流体/応答レイアウトでのマージンとパッドの高さの計算

Question

流体/反応性レイアウトでmargin-left/padding-leftとmargin-right/padding-rightを計算する方法を理解しています。しかし、約margin-top/padding-topとmargin-bottom/padding-bottomについてはどうですか？

例えば、私はこのコードを持っている：私はパディングトップを変換するにはどうすればよい

header h1{padding:10px 0 0 8.823529411765%;} 

：

header h1{padding:10px 0 0 15px;} 

私は流体レイアウトにこれを変換し、これを取得しますか？ 16px（本体のフォントサイズ）でダイビングする私がそうするとき、結果は10px以上効果的です。

Answer 1

フォントのサイズにマージンとパディングが反応するようにするには、ユニットにemを使用することをお勧めします。継承のために複雑ですが、emは1行のテキストの縦の高さを表す書体単位です。詳細については、ジョンタンジェリンの記事を参照してください。

http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

をまた、ジョンは全角変換テーブルにPXを供給しています http://jontangerine.com/silo/css/pixels-to-ems/

をそれはEMが行の高さや余白のようなもののためだ使用するのが一般的ですが、ピクセルの代わりに任意のプロパティを文字通り使用することもできます。