在我无法摆脱的部门上方和下方的额外空间？

Question

我网站的侧边栏菜单包含指向三个社交媒体网站的链接。当您将鼠标悬停在＆＃39;通讯录上时，这些链接会显示在下拉框中。我已将链接放在他们自己的部门中，因此我可以单独定制它们并注意到无论我改变什么，div中都有额外的空间，就好像我在链接中添加了一个边距。我可以改变宽度，但每个框中文本的上方和下方都有空格。我希望空间消失，结果只有3行文本坐在彼此下面，而不是3块。我做错了什么？我应该使用其他东西而不是分裂吗？此外，我在链接上添加了粉红色边框，以使更多空间更加清晰。

＆＃13;

＆＃13;

html {
  background-color: #05061A;
  min-height: 200%;
}

h1 {
  font-family: 'Lato Bold 700', sans-serif;
  font-size: 7.20vw;
  background: -webkit-linear-gradient(top, #D2DFF0, #7D81BE, #05061A);
  background: -moz-linear-gradient(top, #D2DFF0, #7D81BE, #05061A);
  background: -o-linear-gradient(top, #D2DFF0, #7D81BE, #05061A);
  background: linear-gradient(to bottom, #D2DFF0, #7D81BE, #05061A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: none;
  margin: 0%;
  text-shadow: 0 0 1px transparent;
  transition: text-shadow 0.35s ease;
  -webkit-stroke-width: 5.3px;
  -webkit-stroke-color: transparent;
  -webkit-fill-color: transparent;
}

h1:hover {
  text-shadow: 0 0 1px #D2DFF0;
  transition: text-shadow 0.35s ease;
  -webkit-stroke-width: 5.3px;
  -webkit-stroke-color: #FFFFFF;
  -webkit-fill-color: #FFFFFF;
}

h3 {
  font-family: 'Pontano Sans', sans-serif;
  font-size: 1.60vw;
  color: #7D81BE;
  text-decoration: none;
  -webkit-transition: color 0.10s;
  -moz-transition: color 0.10s;
  -ms-transition: color 0.10s;
  -o-transition: color 0.10s;
  transition: color 0.10s;
  padding: none;
  margin: 0px;
}

h3:hover {
  color: #D2DFF0;
}

h4 {
  color: #7D81BE;
  font-family: 'Pontano Sans', sans-serif;
  font-size: 1vw;
}

h5 {
  color: #7D81BE;
  font-family: 'Pontano Sans', sans-serif;
  font-size: 1vw;
  padding: none;
  margin: none;
}

h5:hover {
  color: #D2DFF0;
}

h6 {
  color: #7D81BE;
  font-family: 'Pontano Sans', sans-serif;
  font-size: 0.8vw;
}

h7 {
  color: #D2DFF0;
  font-family: 'Pontano Sans', sans-serif;
  font-size: 1.60vw;
  padding: none;
  margin: none;
}

h8 {
  font-family: 'Pontano Sans', sans-serif;
  font-size: 1.40vw;
  color: #D2DFF0;
  text-decoration: none;
  -webkit-transition: color 0.10s;
  -moz-transition: color 0.10s;
  -ms-transition: color 0.10s;
  -o-transition: color 0.10s;
  transition: color 0.10s;
  position: absolute;
  margin-top: -5%;
  margin-left: -10.9%;
  min-width: 15vw;
}

p {
  color: #D2DFF0;
  font-family: 'Pontano Sans', sans-serif;
  font-size: 1.1vw;
  margin-top: none;
  margin-bottom: none;
}

a {
  font-family: 'Pontano Sans', sans-serif;
  color: #7D81BE;
  text-decoration: none;
  -webkit-transition: color 0.10s;
  -moz-transition: color 0.10s;
  -ms-transition: color 0.10s;
  -o-transition: color 0.10s;
  transition: color 0.10s;
}

a:hover {
  color: #D2DFF0;
}

a:visited {
  color: #7D81BE;
}

div {
  padding: 0%;
  margin: 0%;
}

#sidebar {
  text-align: center;
  align-content: center;
  width: 22%;
  height: auto;
  float: left;
  top: 6%;
  left: 4%;
  position: fixed;
  background: -webkit-linear-gradient(bottom, #0C1033, #05061A);
  background: -moz-linear-gradient(bottom, #0C1033, #05061A);
  background: -o-linear-gradient(bottom, #0C1033, #05061A);
  background: linear-gradient(to top, #0C1033, #05061A);
}

#sidebarart {
  padding: 0% 5% 0% 5%;
  margin: 0px;
  width: 80%;
  height: auto;
}

#gallery {
  width: 70%;
  height: auto;
  position: relative;
  float: right;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 4vw;
  align-content: center;
  text-align: center;
}

.album {
  display: block;
  padding: none;
  margin: 5% 5% 20% 5%;
  max-width: 90%;
  height: auto;
  overflow: auto;
  -webkit-box-shadow: 0px 0px 30px 4px #05061A;
  -moz-box-shadow: 0px 0px 30px 4px #05061A;
  box-shadow: 0px 0px 30px 4px #05061A;
  transition: box-shadow 0.60s ease;
  border: 2px solid blue;
}

.album:hover {
  -webkit-box-shadow: 0px 0px 30px 4px #D2DFF0;
  -moz-box-shadow: 0px 0px 30px 4px #D2DFF0;
  box-shadow: 0px 0px 30px 4px #D2DFF0;
  transition: box-shadow 0.35s ease;
}


/* Dropdown Button */

.dropbtn {
  position: relative;
  background-color: transparent;
  padding: 0px;
  border: none;
  cursor: pointer;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}


/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  display: block;
  float: inherit;
  width: 100%;
  padding: 0px;
  margin-left: auto;
  margin-right: auto;
  margin-top: none;
  margin-bottom: none;
  height: auto;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  background-color: transparent;
  width: auto;
  padding: 0px;
  border: none;
}


/* Content inside the dropdown */

.dropdown-content {
  float: left;
}


/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
  display: block;
  margin-top: none;
  margin-bottom: none;
  width: auto;
  height: 10%
}

.link {
  display: block;
  max-width: auto;
  float: left;
  border: 1px solid pink;
  line-height: 5%;
}

＆＃13;

<!DOCTYPE html>

<head>
  <title>L4-E</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="Izzy Palmer">
  <meta name="description" content="L4-E Music">
  <meta name="keywords" content="Music, L4-E">
  <meta name="robots" content="noindex, nofollow">
  <link rel="stylesheet" href="question.css">
  <link href="https://fonts.googleapis.com/css?family=Lato|Pontano+Sans" rel="stylesheet">
</head>

<figure>
  <div class="sidebarbox" id="sidebar">
    <header>
      <a href="index.html">
        <h1>L4-E</h1>
      </a>
    </header>
    <img src="images/Sidebar-art.PNG" id="sidebarart" alt="Sidebar Art"><br>

    <div class="dropdown">
      <button class="dropbtn"><h3>Bio</h3></button>
      <div class="dropdown-content">
        <p>this is my bio. this is my bio. this is my bio. this is my bio. this is my bio. this is my bio.this is my bio. this is my bio. this is my bio. this is my bio. this is my bio. this is my bio. this is my bio. this is my bio. this is my bio. this
          is my bio.</p>
      </div>
    </div>
    <div class="dropdown">
      <button class="dropbtn"><h3>Contacts</h3></button>
      <div class="dropdown-content">
        <div class="link">
          <a href="#" target="_blank">
            <h5>Facebook</h5>
          </a>
        </div><br>
        <div class="link">
          <a href="#" target="_blank">
            <h5>Twitter</h5>
          </a>
        </div><br>
        <div class="link">
          <a href="https://soundcloud.com/l4-e" target="_blank">
            <h5>Soundcloud</h5>
          </a>
        </div>
      </div>
    </div>
  </div>
</figure>

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果我理解了这个问题，你所看到的是h5上的默认保证金。您已定义padding: none; margin: none;哪个会消除该边距...如果none是margin/padding的有效值，但它不是，那么这些行将被忽略样式表。将其更改为0。如果您希望链接在彼此之上，请移除<br>并将clear: left;添加到.link，如果您想创建垂直空间，请使用{{1} }或margin。我还删除了padding因为这会弄乱元素的高度并导致文本堆叠在一起。

line-height: 5%

html {
  background-color: #05061A;
  min-height: 200%;
}

h1 {
  font-family: 'Lato Bold 700', sans-serif;
  font-size: 7.20vw;
  background: -webkit-linear-gradient(top, #D2DFF0, #7D81BE, #05061A);
  background: -moz-linear-gradient(top, #D2DFF0, #7D81BE, #05061A);
  background: -o-linear-gradient(top, #D2DFF0, #7D81BE, #05061A);
  background: linear-gradient(to bottom, #D2DFF0, #7D81BE, #05061A);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: none;
  margin: 0%;
  text-shadow: 0 0 1px transparent;
  transition: text-shadow 0.35s ease;
  -webkit-stroke-width: 5.3px;
  -webkit-stroke-color: transparent;
  -webkit-fill-color: transparent;
}

h1:hover {
  text-shadow: 0 0 1px #D2DFF0;
  transition: text-shadow 0.35s ease;
  -webkit-stroke-width: 5.3px;
  -webkit-stroke-color: #FFFFFF;
  -webkit-fill-color: #FFFFFF;
}

h3 {
  font-family: 'Pontano Sans', sans-serif;
  font-size: 1.60vw;
  color: #7D81BE;
  text-decoration: none;
  -webkit-transition: color 0.10s;
  -moz-transition: color 0.10s;
  -ms-transition: color 0.10s;
  -o-transition: color 0.10s;
  transition: color 0.10s;
  padding: none;
  margin: 0px;
}

h3:hover {
  color: #D2DFF0;
}

h4 {
  color: #7D81BE;
  font-family: 'Pontano Sans', sans-serif;
  font-size: 1vw;
}

h5 {
  color: #7D81BE;
  font-family: 'Pontano Sans', sans-serif;
  font-size: 1vw;
  padding: 0;
  margin: 0;
}

h5:hover {
  color: #D2DFF0;
}

h6 {
  color: #7D81BE;
  font-family: 'Pontano Sans', sans-serif;
  font-size: 0.8vw;
}

h7 {
  color: #D2DFF0;
  font-family: 'Pontano Sans', sans-serif;
  font-size: 1.60vw;
  padding: none;
  margin: none;
}

h8 {
  font-family: 'Pontano Sans', sans-serif;
  font-size: 1.40vw;
  color: #D2DFF0;
  text-decoration: none;
  -webkit-transition: color 0.10s;
  -moz-transition: color 0.10s;
  -ms-transition: color 0.10s;
  -o-transition: color 0.10s;
  transition: color 0.10s;
  position: absolute;
  margin-top: -5%;
  margin-left: -10.9%;
  min-width: 15vw;
}

p {
  color: #D2DFF0;
  font-family: 'Pontano Sans', sans-serif;
  font-size: 1.1vw;
  margin-top: none;
  margin-bottom: none;
}

a {
  font-family: 'Pontano Sans', sans-serif;
  color: #7D81BE;
  text-decoration: none;
  -webkit-transition: color 0.10s;
  -moz-transition: color 0.10s;
  -ms-transition: color 0.10s;
  -o-transition: color 0.10s;
  transition: color 0.10s;
}

a:hover {
  color: #D2DFF0;
}

a:visited {
  color: #7D81BE;
}

div {
  padding: 0%;
  margin: 0%;
}

#sidebar {
  text-align: center;
  align-content: center;
  width: 22%;
  height: auto;
  float: left;
  top: 6%;
  left: 4%;
  position: fixed;
  background: -webkit-linear-gradient(bottom, #0C1033, #05061A);
  background: -moz-linear-gradient(bottom, #0C1033, #05061A);
  background: -o-linear-gradient(bottom, #0C1033, #05061A);
  background: linear-gradient(to top, #0C1033, #05061A);
}

#sidebarart {
  padding: 0% 5% 0% 5%;
  margin: 0px;
  width: 80%;
  height: auto;
}

#gallery {
  width: 70%;
  height: auto;
  position: relative;
  float: right;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 4vw;
  align-content: center;
  text-align: center;
}

.album {
  display: block;
  padding: none;
  margin: 5% 5% 20% 5%;
  max-width: 90%;
  height: auto;
  overflow: auto;
  -webkit-box-shadow: 0px 0px 30px 4px #05061A;
  -moz-box-shadow: 0px 0px 30px 4px #05061A;
  box-shadow: 0px 0px 30px 4px #05061A;
  transition: box-shadow 0.60s ease;
  border: 2px solid blue;
}

.album:hover {
  -webkit-box-shadow: 0px 0px 30px 4px #D2DFF0;
  -moz-box-shadow: 0px 0px 30px 4px #D2DFF0;
  box-shadow: 0px 0px 30px 4px #D2DFF0;
  transition: box-shadow 0.35s ease;
}


/* Dropdown Button */

.dropbtn {
  position: relative;
  background-color: transparent;
  padding: 0px;
  border: none;
  cursor: pointer;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}


/* The container <div> - needed to position the dropdown content */

.dropdown {
  position: relative;
  display: block;
  float: inherit;
  width: 100%;
  padding: 0px;
  margin-left: auto;
  margin-right: auto;
  margin-top: none;
  margin-bottom: none;
  height: auto;
}


/* Dropdown Content (Hidden by Default) */

.dropdown-content {
  display: none;
  background-color: transparent;
  width: auto;
  padding: 0px;
  border: none;
}


/* Content inside the dropdown */

.dropdown-content {
  float: left;
}


/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
  display: block;
  margin-top: none;
  margin-bottom: none;
  width: auto;
  height: 10%
}

.link {
  display: block;
  max-width: auto;
  float: left;
  clear: left;
  /*border: 1px solid pink;*/
  /*line-height: 5%;*/
}