文字サイズを大きくすると、背景も大きくなってしまう

Question

1枚目の画像は、文字サイズを10%にした時で、
2枚目の画像は、300%にしたものです。
文字のサイズを大きくすると背景も大きくなってしまいます。
文字のサイズだけを大きくする方法を教えてください。

コードは以下の通りです、

<h1 style ="color:#ffffff; position:relative; left :40px; top :5px;font-size:10%">tarako</h1>

Comments

[yoshinavi]

テキストの大きさ変更で背景の高さが変わるのは、「背景の高さが固定されていない」場合が考えられます。 また、位置「top:」がズレるのは「line-height:」等の影響も考えられます。 ＜h1＞を含め、内包している背景部分（div等）の、関連部分のHTML・CSSの提示が、具体的により良い回答を得れると思います。

Answer 1

文字だけ大きくするには文字を内包している要素の高さを固定する必要があるかと

Answer 2

次のように「背景」と「文字」を分けて、CSSで「文字」だけを大きくしてみてはいかがでしょうか。

➀HTMLで「h1の背景」と「h1の文字」に分けてあげる。

<div class"h1_area">
<h1 class="h1_custom">tarako</h1>
</div>

➁CSSでそれぞれ指定してあげる。

.h1_area {
    background: #85D7BB;
    height: 100px
}

.h1_custom {
    color: #ffffff;
    position: relative;
    left: 40px;
    top: 5px;
    font-size: 10%;
}

Answer 3

取り敢えず簡単方法としては、
①h1を一つの<div>を使ってエリアにして、エリアの幅と高さを固定知てみましょう。
②<h1>を①のエリア内に書きましょう。

<div class="h1-area">　<!--①divを使ってh1のエリアを作成-->
	<h1>tarako</h1> <!--②h1部分を記述-->
</div>

③CSSでh1エリアの幅・高さ・背景色を設定しましょう。

.h1-area{
	background-color: aqua;
	width: 960px;
	height: 300px;	
}

④h1の文字の大きさを設定しましょう。

h1{
	font-size: 300%; /*分かりやすいように大きさを300%としてみました。*/
}

↓

やりかたは、色々ありますので、あくまでも一例です。