在不影响背景颜色的情况下更改线条高度

Question

我目前正在进行FreecodeCamp的第一次测试，所以我的问题可能是愚蠢的。我想把#Titles的行高改小一点，同时保持它的背景色。可能是显示元素，但我想不出该怎么做。另外，我想去掉我的图像周围的白线，就在边界之前...

<div id="main">
<div id="titles">
<h1 id="title">A tribute to Ocelote</h1>
<h2 id="title2">The man who has done it all.</h2>
</div>
<hr>
<div id="img-div">
<img id="image" src="https://theshotcaller.net/wp-content/uploads/2017/09/IMG_5488-1.jpg" alt="A photo of Ocelote">
<div id="img-caption"> A story of how far can one go, if only the desire is 
there.
</div>
<div id="tribute-info">
<br>
<br>
   fgj
   </div>
<a id="tribute-link" href="https://lol.gamepedia.com/Ocelote" target="_blank"> </a>
</div>
</div>

https://jsfiddle.net/deffciu/hrna0lfs/欢迎任何帮助

Answer 1

在#titles中添加以下两个规则使其工作：

#titles {
  display: block;
  background: #6C7E95;
  line-height: 5px;
  /* Add the below two rules */
  overflow: hidden;
  padding: 0 0 20px;
}

你得到了这个：

片断

html, body {
  font-family: 'Oswald', sans-serif;
  text-align: center;
  background: white;
}

#title2 {
  color: #052449;
  margin-bottom: 0px;
}

#titles {
  display: block;
  background: #6C7E95;
  line-height: 5px;
  /* Add the below two rules */
  overflow: hidden;
  padding: 0 0 20px;
}

#image {
  border: 8px solid #052449;
  border-radius: 50%;
  width: 500px;
  height: 375px;
  margin-top: 15px;
}

hr {
  border-color: #486282;
  margin-top:0px;
}

#img-caption {
  margin-top: 20px;
  font-style: italic;
  font-size: 25px;;
}

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

<div id="main">
  <div id="titles">
  <h1 id="title">A tribute to Ocelote</h1>
  <h2 id="title2">The man who has done it all.</h2>
  </div>
  <hr>
  <div id="img-div">
    <img id="image" src="https://theshotcaller.net/wp-content/uploads/2017/09/IMG_5488-1.jpg" alt="A photo of Ocelote">
  <div id="img-caption"> A story of how far can one go, if only the desire is there.
       </div>
  <div id="tribute-info">
    <br>
    <br>
       fgj
       </div>
  <a id="tribute-link" href="https://lol.gamepedia.com/Ocelote" target="_blank"> </a>
</div>
</div>