CSS内の文字の高さに応じた背景サイズ

Question

「M」文字のサイズの3倍の黄色の背景がほしいとします。私はそれをどこかの質問として見てきたが、そのトリックを知らない。どんな手掛かり ？ htmlは変更しないでください。CSSのみを追加する必要があります。ありがとう。

<h1 class = "smth">My beautiful page</h1> 

.smth{ 
color:blue; 
background-color: yellow; 
} 

Answer 1

要素の高さはem単位です。あなたは20pxに要素のfont-sizeを設定する場合は、3em

h1{ 
 
    background: lightblue; 
 
    font-size: 20px; 
 
    display: inline-block; 
 
    height: 3em; 
 
}

<h1 class = "smth">My beautiful page</h1>

Answer 2

私はあなたが探しているものと考えている

height:2em; 

または

.smth { 
color:blue; 
background-color: yellow; 
height: 2em; 
} 

EMは要素のフォントサイズ（2EMがの2倍の大きさを意味する相対的なものです現在のフォント）