スタイルシートでh1の属性行間のを高さを17ピクセルにしたい場合

質問

スタイルシートでh1の文字の大きさを変えていますが、表示すると本来の行送りと同じ分の高さが出て、デザイン的に高さがありすぎる行間になっています。
この場合、行高さの設定をするのですか。line-height:17px;で指定しても直らないようなんですが。

この指定で合ってますか。

回答No.1

naokita · ベストアンサー

line-heightは行間を開けるタグで減らす為のタグではない。

line-height:17px;
の値１７からh1の縦幅値を引いた数字が行間になる。
h1は元々幅が大きいので・・・

margin指定
---------------------------------
<style type="text/css"><!--

h1 { font-size: 18px; }

--></style>
---------------------------------
<h1>BBBBB</h1>
<h1 style="margin: 0;">BBBBB</h1>
<h1 style="margin: 0;">BBBBB</h1>
<h1 style="margin: 1px 0;">BBBBB</h1>
<h1 style="margin: 2px 0;">BBBBB</h1>
<h1 style="margin: 3px 0;">BBBBB</h1>
<h1 style="margin: 6px 0;">BBBBB</h1>
<h1 style="margin: 10px 0;">BBBBB</h1>
<h1 style="margin: 15px 0;">BBBBB</h1>
---------------------------------

お礼

<style type="text/css">
<!--
.h1{
margin-top:0px;
margin-bottom:0px;
}
-->
</style>

でできました。ありがとうございます。

回答No.3

LLLuna

いまいち質問が理解できないのは私の理解力不足でしょうか……。

line-heightは行間を指定するというより、行の高さを指定するものです。
ところで、line-heightプロパティには単位のない数値を指定することを推奨します。CSSでは殆どの場合、必ず単位をつけなければなりませんが、このプロパティでは、単位無しの数字はemとほぼ同じ働きをします。異なる点は、例えばfont-size:20pxでline-height:1.3emと指定された要素があり、その子要素にfont-size:40pxと指定されていると、子要素の文字列は他の行と被ります。line-heightの値が26pxとして継承されているからです。
一方、先の例で1.3emの代わりに1.3と記述すると、子要素が他の行とは被りません。
意外と知られていませんが。

それと、1氏の他、割と多くの人が間違えていますが、line-heightはCSS「プロパティ」です。
何でもかんでも「タグ」と呼ぶのは無用な混乱を招く原因です。よく判らなければ「もの」とでもして曖昧にするのが無難。

お礼

単位を必ずつけたほうがいいですね、ありがとうございます。

回答No.2

kyanasaki

.h1 {
margin:0;
padding:0;
font-size:12px;
}

こんなんで出来ませんかね？
動作未確認。

お礼

今回はmargin-top:0px;とmargin-bottom:0px;で対応できました。ありがとうございます。