Changing line height of horizontal rule - html

Question

I have followed a tutorial on the internet and I have the following html template:
body {
font-weight: 200;
font-size: 14px;
}
.header {
font-size: 20px;
font-weight: 100;
text-align: center;
color: #007cae;
}
.title {
font-size: 22px;
font-weight: 100;
/* text-align: right;*/
padding: 10px 20px 0px 20px;
}
.title span {
color: #007cae;
}
.details {
padding: 10px 20px 0px 20px;
text-align: left !important;
/*margin-left: 40%;*/
}
.hrItem {
border: none;
height: 1px;
/* Set the hr color */
color: #333; /* old IE */
background-color: #fff; /* Modern Browsers */
}
<div class='wrapper'>
<div class='header'>
<p class='title'>Invoice #<hr class='hrItem' /> </p>
</div>
<div>
<div class='details'>
Bill to: <br/>
Amount: <br/>
Date:
</div>
</div>
The problem that I am having is that between Invoice # and the horizontal rule there is a significant amount of white space that I want to remove. I tried changing the padding and the margin in the .hrItem,.tittle and .header, however, this made no difference. Is it possible to remove that white space or should I reconsider the method of adding the horizontal line?

Answer 1

You need to place the <hr> outside of your <p>, as having it inside is invalid HTML and actually ends up creating an empty <p></p>, which creates more space:
What you should have is:
<div class='header'>
<p class='title'>Invoice #</p>
<hr class='hrItem' />
</div>
Once you make that change, you can control the spacing between the .hrItem and the .title by changing their margin properties (I set both to 0):
body {
font-weight: 200;
font-size: 14px;
}
.header {
font-size: 20px;
font-weight: 100;
text-align: center;
color: #007cae;
}
.title {
font-size: 22px;
font-weight: 100;
/* text-align: right;*/
padding: 10px 20px 0px 20px;
margin: 0;
}
.title span {
color: #007cae;
}
.details {
padding: 10px 20px 0px 20px;
text-align: left !important;
/*margin-left: 40%;*/
}
.hrItem {
border: none;
height: 1px;
/* Set the hr color */
color: #333; /* old IE */
background-color: #fff; /* Modern Browsers */
margin: 0;
}
<div class='wrapper'>
<div class='header'>
<p class='title'>Invoice #</p>
<hr class='hrItem' />
</div>
<div class='details'>
Bill to: <br/>
Amount: <br/>
Date:
</div>
</div>