0

これは簡単なはずですが、わかりません。私は 3 行 (1 つの小さなフォント、1 つの大きなフォント、1 つの小さなフォント) を 1 つの間隔で互いに積み重ねようとしています。代わりに、大きなフォントの行の上には常にダブル スペースがあります (48 ポイントの場合は、その上に 48 ポイントの行があります)。

マージン、パディング、高さ、ボーダーで遊んだことがあります。最低限の必需品を除いてすべてを取り除きましたが、まだ上部と中央の線を互いにうまく合わせることができません.

コード：

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>

<div style="
  font-size:16px; 
  height:16px;
  padding:0px;
  border:0px;
  margin:0px">
  <p>Line 1<p></div>

<div style="
  font-size:48px; 
  height:48px;
  padding:0px;
  border:0px;
  margin:0px">
  <p>Line 2</p></div>

<div style="
  font-size:16px; 
  height:16px;
  padding:0px;
  border:0px;
  margin:0px">
  <p>Line 3</p></font>


</html>
4

3 に答える 3

0

ここでは、物事を非常に単純にしましょう。あなたが探しているのはline-heightとmarginです。

http://jsfiddle.net/TSLA7/1/

そこで、html を少し削除して単純化しましょう。

<div class='stacked_lines'>
    <div>
        <p>Line 1</p>
    </div>

    <div style="font-size:48px;">
        <p>Line 2</p>
    </div>

    <div>
        <p>Line 3</p>
    </div>
</div>

そしていくつかのCSSで：

.stacked_lines div {
    line-height:1;
    font-size:16px;
}

.stacked_lines p {
    margin:0; 
}

そのため、div で高さを指定する必要がなくなりました。高さ1はフォント サイズの倍数です (つまり、フォント サイズと同じです!)。

要素の余白を減らしましたp。つまり、要素は必要に応じてスタックされます。

于 2013-09-15T20:41:20.363 に答える
0

ブロブ間の余分なスペースを取り除くために、代わりに line-height を使用してみてください。

p { 
    line-height:0.7;
    margin:0
}

http://jsfiddle.net/C4mFX/

于 2013-09-15T20:41:54.740 に答える