2011-09-12 8 views
-1

要素を変換しようとしています。フォントサイズの変換はうまくいきますが、余白の変換はあまり効果がありません。あなたが見ることができるように、ブラウザで見たときに、H2および■はテキストが同じフォントサイズを持っている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> 

と比較すると:

は、ここに私の試みです。

これは間違っており、24ピクセルである必要があります。私は何のミスをしましたか?

+2

なぜ24pxにする必要がありますか?あなたの計算は正確で、.75emは22.5pxに等しい。ブラウザが切り捨てられないようにするには、.77em(23/30)を使うだけでよい。 – Gerben

+0

ブラウザで見ると、H2と.boxのテキストは正確には整列していません.1pxで表示されていますが、大したことではないようですが正確に同じにする必要があります。 – Kay

答えて

-1

div要素のmarginプロパティは、すべてのブラウザでデフォルトでプリセットされていますが、font-sizeプロパティはデフォルトではプリセットされています。具体的には、あなたが他の要素が継承されますが、H2は、内部ユーザエージェントCSSでブラウザによって予め設定された体のフォントサイズを設定

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

:それをオーバーライドするには、これを使用することによって、より具体的にする必要があります「特異性」のように、体に設定したものよりも優先されます。

たとえば、Firebugを使用している場合は、ブラウザでh2がすでにブラウザにある値に設定されていることがわかります。これを変更したい場合は、divで他の例と同様にh2{font-size: 24px}を指定する必要があります。 Divsは、ブラウザによってフォントサイズが設定されていません。

関連する問題