更改线条高度而不影响背景颜色

Question

我目前正在从事freecodecamp的首次测试，所以我的问题可能很愚蠢。我想将#title的行高更改为较小的行，同时保持其背景色。它可能是显示元素，但我不知道该怎么做。另外，我想消除边框周围的白线，就在边框之前...

<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>

对于白色边框问题，这是您body的边距。下面的代码将解决此问题。

body {margin: 0;}