16

横の見出しに複数行のテキストがあります。2 つの行の間隔を広げたいので、行の高さを設定します。これを行うと、2 つの行の間のスペースが増えるだけでなく、最初の行の上 (および 2 番目の行の下) の間隔も広がります。上下を広げずに、2行間の間隔だけを広げるにはどうすればよいですか。

の挙動であることはわかっていLine-heightます。しかし、これに対する良い解決策があるかどうかは興味があります。

これは、私が求めていることの単なる例です。

Jsfiddle: http://jsfiddle.net/jitendravyas/V3eWV/

ここに画像の説明を入力

4

1 に答える 1

12

これには負のマージンを使用できますが、注意すべき点があります。

line-height面白いことです。CSS2.1によると、行の高さは指定されていませんが、行ブロックの最小の高さは指定されています。

コンテンツがインライン レベルの要素で構成されるブロック コンテナー要素では、'line-height'は要素内の行ボックスの最小の高さを指定します。最小の高さは、ベースラインより上の最小の高さと、その下の最小の深さで構成されます。これは、要素のフォントと行の高さのプロパティを持つ幅がゼロのインライン ボックスで各ライン ボックスが始まるのとまったく同じです。その架空の箱を「ストラット」と呼んでいます。(名前は TeX にインスパイアされています。)

ライン ボックスは9.4.2 インライン フォーマッティング コンテキストで定義されています。

インライン フォーマッティング コンテキストでは、ボックスは包含ブロックの上部から順に水平方向に配置されます。これらのボックスの間では、水平マージン、境界線、およびパディングが考慮されます。ボックスはさまざまな方法で垂直方向に配置できます。ボックスの下部または上部を整列させたり、ボックス内のテキストのベースラインを整列させたりできます。ラインを形成するボックスを含む長方形の領域は、ライン ボックスと呼ばれます。

これはCSS3ではほとんど変わりません。少なくともline-stacking. ただし、問題を直接対象とするプロパティはありません。 の を変更することはできませんline-height。::first-line常に適用されます。

とはいえ、当面は負のマージンを使用してください。さらに良いことに、要素を汎用コンテナーにラップします。:first-childandを使用:last-childすることで、好きなだけ要素を追加できます。

例

<div>
    <h1>I've a text in side heading with multiple lines. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line.</h1>    
    <h1>I've a text in side heading with multiple lines. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line.</h1>
</div>

body {padding:30px;background:yellow;border:1px solid red;margin:0}
div{background:red;margin:0;padding:0;border:1px solid green;}
h1{line-height:2em;}
div > h1:first-child{
    margin-top:-.25em;
}
div > h1:last-child{
    margin-bottom:-.25em;
}
于 2012-08-01T07:17:22.207 に答える