改变水平规则的线高

Question

我在互联网上关注了一个教程，我有以下html模板：

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>

我遇到的问题是Invoice＃和水平规则之间存在大量我要删除的空白区域。我尝试改变.hrItem，.tittle和.header中的填充和边距，然而，这没有任何区别。是否可以删除该空白区域，还是应该重新考虑添加水平线的方法？

Answer 1

你需要将<hr>放在你的<p>之外，因为它内部是无效的HTML并且实际上最终会创建一个空的<p></p>，这会创建更多的空间：

你应该拥有的是：

<div class='header'>
    <p class='title'>Invoice #</p>
    <hr class='hrItem' />
</div>

一旦你做了这个改变，你可以通过改变他们的.hrItem属性来控制.title和margin之间的间距（我将它们都设置为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>