Geçenlerde Geçmişte <a href="http://necolas.github.com/normalize.css" rel="nofollow">normalize.css</a></p> <p>büyük bir hayranı oldum

Question

yazı boyutlandırma ve marjlar vb normalize.css REM, EM ve PX değerlerin hesaplanması, benim yazı hesaplamak için this süper kolay bir yöntem kullandım boyutlar, çizgi yüksekliği, kenar boşluğu ve dolgu hesaplamaları. Ancak, normalize.css aracılığıyla boyutlandırma yapısı beni şaşırtıyor. Örneğin,

.

kenar ve doldurma iken

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

EMS olarak hesaplanmaktadır:

p { 
    margin-bottom: 1.5em; 
} 

body etiket ile, yazı tipi boyutunda REMS PX ve hat yükseklikte birimsiz değerler olarak hesaplanmaktadır olarak hesaplanmaktadır Her şey nasıl hesaplanıyor? <p> etiketime 24px'lik bir kenar boşluğu eklemek istediğimi varsayalım. Bu, daha önce karşılaştığım bir yöntem değil ve mantığı anladığım kadar önemlidir, böylece her şeyi doğru bir şekilde hesaplayabilirim. Daha fazla okuma için sağlayabileceğiniz bağlantılar büyük beğeni topluyor. senin örneklemde

Answer 1

em ve ex birimleri yazı bağlıdır ve belgede her element için farklı olabilir. Em sadece yazı tipi boyutudur.

Bilmen gereken tüm

buradadır: Vücudun seti font https://www.w3.org/Style/Examples/007/units.en.html

em beri bu 24px Marjı

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

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

Ve bu 45px verecek verecek kenar boşluğu

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

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