여백 및 안쪽 여백에서 글꼴 크기를 참조 포인트로 사용합니까?

Question

아래 코드에서 p 및 h2에 margins을 각각 font-size을 기준으로 삼습니까?

어때 대략 margin 및 paddingdiv.contact? 그들이 참조 점을 얻는 이유는 무엇입니까? 그것은 시체입니까 font-size? div.contact 1em에서

body { font-size: 100%; } 
p { font-size: 1em; margin-bottom:0.5em; } 
h2 { font-size: 2em; margin-bottm:1em; } 
div.contact { margin: 1.5em 0; padding: 0 0.7em; } 

Answer 1

는이 상황이 body 선언 100%을 의미하며, 현재 사업부의 글꼴 크기에서이다.

다른 상황 :

<style> 
    body {font-size: 100%:} 
    #wrapper {font-size: 120%;} 
    .contact {margin: 1em} /* 1em regarding font-size 120% */ 
</style> 

<div id=wrapper> 
    <div class=contact>contact</div> 
</div> 

Answer 2

신체에 16px 폰트 크기를 가정한다.

아래 코드에서 p와 h2의 여백은 각각 글꼴 크기를 기준으로 삼습니까?

예 :

• P 것 16 * 1 * 0.5 = 8px 아래쪽 여백
• H2 것 * 2 16 * 1 = 32px 아래쪽 여백

div.contact에서 여백과 여백은 어떨까요? 그들은 무엇을 참조 점으로 취합니까? 본문 글꼴 크기입니까? 그것의 부모 (수 body 요소)에서 상속 있도록

사업부는 명시 적으로 글꼴 크기를 가지고 있지 않습니다

• 사업부해야합니다 16 * 1.5 = 24 픽셀 마진과 16 * .7 = 11.2px 패딩

Answer 3

예, em의 여백 및 패딩은 부모 font-size를 기준으로합니다.

하자 당신이이 마크 업이 말 :

<div class="contact"> 
    <h2>Heading</h2> 
    <p>Paragraph</p> 
</div> 

당신은 100 %의 몸의 글꼴 크기가를, 그래서 용이함은의가 16px을 생각한 것은, 브라우저 표준 글꼴 크기입니다. (이제 em을 마음 속에 px로 변환해서는 안되지만 em 기반으로 생각하는 방식을 바꿔야합니다. 아래의 코드에서 변환을 이해하도록 돕기 위해)

div.contact의 의미는

입니다. 의미 h2를 들어

div.contact { 
    margin: 1.5em 0; /* 16 x 1.5 = 24px */ 
    padding: 0 0.7em; /* 16 x 0.7 = 11.2px */ 
} 

: 당신이 .contact에서 글꼴 크기를 변경하는 경우

h2 { 
    font-size: 2em; /* 16 x 2 = 32px */ 
    margin-bottm:1em; /* 16 x 2 x 1 = 32px */ 
} 

예를 들어,에 일을 말할 수 있습니다.2em이 문제가 발생합니다.

div.contact { 
    font-size: 1.5em; /* 16 x 1.2 = 19.2px */ 
    margin: 1.5em 0; /* 16 x 1.2 x 1.5 = 28.8px */ 
    padding: 0 0.7em; /* 16 x 1.2 x 0.7 = 13.44px */ 
} 
h2 { 
    font-size: 2em; /* 16 x 1.2 x 2 = 38.4px */ 
    margin-bottm:1em; /* 16 x 1.2 x 2 x 1 = 38.4px */ 
} 

희망이 있습니다.