0

CSS で異なる行の高さを使用していますが、垂直方向の間隔に問題が発生しています。横罫線の上と下と同じ量にしたいと思います。

これは私の問題の例です:

私のHTML

<div class="intro">
<p>The powered flight took a total of about eight and a half minutes. It seemed to me it had gone by in a lash. We had gone from sitting still on the launch pad at the Kennedy Space Center to traveling at 17,500 miles an hour in that eight and a half minutes. It is still mind-boggling to me. </p>
</div>
<hr />
<div class="normal">
<p>I recall making some statement on the air-to-ground radio for the benefit of my fellow astronauts, who had also been in the program a long time, that it was well worth the wait.</p>
</div>
<hr />
<div class="normal">
<p>The powered flight took a total of about eight and a half minutes. It seemed to me it had gone by in a lash. We had gone from sitting still on the launch pad at the Kennedy Space Center to traveling at 17,500 miles an hour in that eight and a half minutes. It is still mind-boggling to me.</p>
</div>

私のCSS

.intro p { margin-bottom: 24px; font-size: 24px; line-height:36px; }
.normal p { margin-bottom: 18px; font-size: 16px; line-height:18px; }
hr { border-top: 1px solid rgb(200,200,200); margin: 10px 0}

ここでも確認できます: http://codepen.io/dachan/pen/Csueb

hr タグに異なるマージンを手動で作成する必要がないことを除いて、私の問題に対する解決策はありますか?

また、複数の段落を持つつもりなので、margin-bottom を省略した解決策はうまくいきません。

4

4 に答える 4

0

ここでの問題は、行の高さではないと思います。各段落の下余白を定義しましたが、上余白はありません。このため、2 番目の段落の上にデフォルトのマージンがあり、hr に近づきます。

考えられる解決策の 1 つは、margin-bottom に等しい margin-top を単純に追加することです。

.intro p { margin-bottom: 24px; font-size: 24px; line-height:36px; }
.normal p { margin-top: 18px; margin-bottom: 18px; font-size: 16px; line-height:18px; }
hr { border-top: 1px solid rgb(200,200,200); margin: 10px 0; }

例: http://jsfiddle.net/3BEkL/1/

各段落の font-size/line-height に基づいて hr の間の異なる間隔を使用しているように見えるので、あなたが望むものではないかもしれない他の可能性は、段落要素からすべてのマージンスタイルを削除し、適用するだけですhr 要素へのマージン。

.intro p { font-size: 24px; line-height:36px; }
.normal p { font-size: 16px; line-height:18px; }
hr { border-top: 1px solid rgb(200,200,200); margin: 30px 0; }

例: http://jsfiddle.net/3BEkL/2/

于 2013-01-23T19:41:49.090 に答える
0

私はこのタグを使用しません<hr>。IE と呼ばれる優れたブラウザでは、スタイルが適切ではないためです。

代わりにdiv、クラス.hrが適用された空を使用します。私のcssは次のようになります。

.hr {
  border-top: 1px solid black;
  margin-top: 10px;
  height: 10px;
}
于 2013-01-23T19:38:51.673 に答える
0

テキスト フローのどこにいるかがわかっている場合は、イントロと最初のテキスト ユニットの間で異なるルール スタイルを使用します。以下は、最初の上下に同じ間隔を与えます<hr/>

hr { border-top: 1px solid rgb(200,200,200); margin: 10px 0 28px 0 }
于 2013-01-23T19:37:02.340 に答える
0

line-heightテキスト要素の を に等しく設定するとfont-size、要素の高さがテキストの高さと等しくなります。要素を追加するときhr、間隔は同じでなければなりません。

.intro p { font-size: 24px; line-height:24px; }

.normal p { font-size: 16px; line-height:16px; }

hr { border-top: 1px solid rgb(200,200,200); margin: 10px 0}
于 2013-01-23T19:40:55.017 に答える