2011-09-12 8 views
-1

요소를 변환하려고합니다. 글꼴 크기 변환은 정상적으로 작동하지만 여백 변환이 그렇게 잘되지 않습니다. 당신이 볼 수 있듯이 브라우저에서 볼 때, H2와 .box 텍스트가 같은 글꼴 크기가H2 변환이 작동하지 않습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html> 
    <head> 
    <style type="text/css"> 
    body{ 
     font-size:20px; 
    } 
    </style> 
    </head> 

<body> 

</head> 
<body> 

<h2>Some text here</h2> 

</body> 
</html> 

:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html> 
    <head> 
    <style type="text/css"> 
    .box{ 
     font-size:30px; 
     margin:23px 0; 
     font-weight:bold; 

    } 
    </style> 
    </head> 

<body> 

</head> 
<body> 

<div class="box">Some text here</div> 

</body> 
</html> 

비교 :

여기 내 시도이다.

정확하지 않으며 24px 여야합니다. 내가 실수 한거야?

+2

왜 24px가되어야합니까? 계산이 정확하고 .75em이 22.5px와 같습니다. 브라우저가 절사하지 않도록 .77em (23/30)을 사용할 수 있습니다. – Gerben

+0

브라우저에서 볼 때 H2와 .box의 텍스트가 정확하게 정렬되지 않았습니다. 1 픽셀 씩 나오기 때문에 큰 문제는 아니지만 정확히 동일해야합니다. – Kay

답변

-1

div 요소의 margin 속성은 기본적으로 모든 브라우저에서 사전 설정되어 있지만 font-size 속성은 그렇지 않습니다. 특히, 당신은 다른 요소가 상속하지만 H2는 내부적으로 사용자 에이전트 CSS에 의해 브라우저에 의해 사전 설정되어 몸의 글꼴 크기를 설정

div.box { font-size:30px; margin:23px 0; font-weight:bold; } 
0

: 그것을 무시하려면, 당신은이를 사용하여, 더 구체적으로 할 필요가 , '특이성 (specificity)'에서와 같이 당신이 몸에 대해 설정 한 것보다 우선합니다.

예를 들어 Firebug를 사용하는 경우 브라우저에서 브라우저가 h2를 일부 값으로 설정했음을 알 수 있습니다. 이를 변경하려면 div로 다른 예제에서와 같이 h2{font-size: 24px}을 지정해야합니다. div는 브라우저에서 폰트 크기를 설정하지 않습니다.

관련 문제