html - 元素顶部和底部的空白

Question

元素的顶部和底部有空白区域，上面写着“SoundCloud Player”。它并不意味着在那里，我只是希望它在顶部没有边距。我该如何摆脱它？

代码:

<div class="content2">
  <div class="twitterfeed">
    <h3>Twitter Feed</h3>
  </div>
  <div class="recent">
    <h3 class="text3">Recent News<span class="slash">   /   </span><span class="text4">Get updates from us!</span></h3>
  </div>
  <div class="readnews">
    <a class="readall" href="themes.goodlayers2.com/musicclub/blog-full-with-right-sidebar/">Read All News</a>
  </div>
</div>
<div class="twittercontent">
<!-- twitter post embed code here -->
</div>
<div class="soundcloudplayer">
  <h3>
    SoundCloud Player
  </h3>
<style type="text/css">
.content2 {
  background: #191919;
  padding-left: 25px;
  padding-right: 20px;
}

.twitterfeed {
  float: left;
  padding-left: 140px;
  color: white;
  font-size: 30px;
  font-family: Didot, Georgia, sans-serif;
}

.recent {
  display: inline-block;
  padding-left: 230px;
}

.readnews {
  float: right;
  color: white;
  padding-right: 230px;
}

.text3 {
  color: white;
  font-family: "Goudy Old Style", Optima, sans-serif;
  font-size: 35px;
  margin-bottom: 0;
}

.text4 {
  font-size: 30px;
  color: #6CB9D9;
}

.readall {
  text-decoration: none;
  color: white;
  transition: color 0.2s ease-out;
}

.readall:hover {
  color: #6CB9D9;
  transition: color 0.2s ease-in;
}

.soundcloudplayer {
    background: #191919;
    color: white;
}
</style>

Answer 1

您只需删除 h3 元素上的默认边距:

h3 {margin: 0;}

由于“边距崩溃”，那些默认的顶部和底部边距卡在容器之外。