私は最近、過去に<a href="http://necolas.github.com/normalize.css" rel="nofollow">normalize.css</a></p> <p>の大ファンになった

Question

フォントサイズや余白などのためにnormalize.cssにREM、EMとPXの値を計算すると、私は私のフォントを計算するthis超簡単な方法を使用しましたサイズ、行の高さ、マージン、およびパディングの計算が含まれます。しかし、サイジング構造normalize.cssを介して私は混乱を完了しています。

たとえば、 bodyタグを介して、フォントサイズは、のREMとPXで算出され、行の高さは、単位のない値で計算されている：

body, 
button, 
input, 
select, 
textarea { 
    font-size: 16px; 
    font-size: 1rem; 
    line-height: 1.5; 
} 

マージンおよびパディングのEMで算出されている間：

p { 
    margin-bottom: 1.5em; 
} 

すべてがどのように計算されていますか？私の<p>タグに24pxのマージンを加えたいとしましょう。これは私が以前に遭遇した方法ではなく、すべてを正しく計算できるように論理を理解することが重要です。さらなる読書のために提供できるリンクは非常に高く評価されています。

Answer 1

あなたのサンプルで

のemとex単位はフォントに依存し、文書内の各 要素のために異なる場合があります。 emは単にフォントサイズです。

あなたが知る必要があるすべてはここにある：https://www.w3.org/Style/Examples/007/units.en.html

emは、身体のセットフォントであるので、これはは24pxのマージン

body { 
 
    font-size: 16px; 
 
} 
 
div { 
 
    height: 30px; 
 
    background: red; 
 
} 
 
p { 
 
    background: yellow; 
 
    margin-bottom: 1.5em; 
 
}

<p>Hello</p> 
 
<div></div>

そして、これは45pxを与えるを与えますマージン

body { 
 
    font-size: 30px; 
 
} 
 
div { 
 
    height: 30px; 
 
    background: red; 
 
} 
 
p { 
 
    background: yellow; 
 
    margin-bottom: 1.5em; 
 
}

<p>Hello</p> 
 
<div></div>