How do you create consistant vertical spacing while using different line-heights? - html

Question

I am using different line-heights in my css and it is causing issues with my vertical spacing. I would like there to be the same amount above the horizontal rule as there is below.
This is an example of my issue:
My 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>
My 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}
You can also see it here:
http://codepen.io/dachan/pen/Csueb
Are there any solutions to my problem, minus having to manually create different margins for the hr tag?
Also, I do intend on having multiple paragraphs so any solution omitting a margin-bottom would not work for me.

Answer 1

If you know where you are in the text flow, just use a different rule style between the intro and the first text unit. The following will give you the same spacing above and below the first <hr/>
hr { border-top: 1px solid rgb(200,200,200); margin: 10px 0 28px 0 }

Answer 2

I do not use the <hr> tag cause it is hard o style properly, defintly in the great browser called IE.
In stead I use an empty div with a class .hr applied to it. My css would look something like this:
.hr {
border-top: 1px solid black;
margin-top: 10px;
height: 10px;
}

Answer 3

If you set the line-height of the text elements equal to the font-size, therefore making the height of the element equal to the height of the text. when you add the hr element the spacing should be the same.
.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}

Answer 4

I don't think your issue here is your line-height. You have defined a bottom margin for each of your paragraphs, but no top margin. Because of this, your second paragraph has default margin above it, making it closer to the hr.
One possible solution is to simply add margin-top equal to your margin-bottom.
.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; }
Example here: http://jsfiddle.net/3BEkL/1/
The other possibility, which may not be what you want, since it seems you are going for different spacing between the hr's based on the font-size/line-height of each paragraph, is
remove all margin styling from the paragraph elements and only apply margins to the hr elements.
.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; }
Example here: http://jsfiddle.net/3BEkL/2/