html - 改变水平线的行高

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>