我无法删除的分区上方和下方的额外 space 链接？
Extra space above and below links in divisions that I can't get rid of?
我网站的侧边栏菜单包含指向三个社交媒体网站的链接。当您将鼠标悬停在 'Contacts' 上时，这些链接会显示在下拉框中。我已将链接放在它们自己的 div 中，这样我就可以在 div 中自定义它们并注意到无论我更改什么，[= 中都有额外的 space 22=] 就好像我在链接上添加了边距一样。我可以很好地更改宽度，但每个框中的文本上方和下方都有 space。我希望 space 消失，所以结果只有 3 行文本位于彼此下方，而不是 3 个块。我做错了什么？我应该使用其他东西而不是 divisions 吗？此外，我在链接中添加了粉红色边框，使额外的 space 更加可见。
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%;
}
<!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>
如果我理解这个问题，您看到的是 h5 上的默认边距。您已经定义了 padding: none; margin: none; 这将消除该边距...如果 none 是 margin/padding 的有效值，但它不是，所以这些行在您的样式表。改为 0 。如果您希望链接彼此重叠，请删除 <br> 并将 clear: left; 添加到 .link，如果您想创建垂直 space，请使用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%;*/
}
<!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>
<div class="link">
<a href="#" target="_blank">
<h5>Twitter</h5>
</a>
</div>
<div class="link">
<a href="https://soundcloud.com/l4-e" target="_blank">
<h5>Soundcloud</h5>
</a>
</div>
</div>
</div>
</div>
</figure>
我网站的侧边栏菜单包含指向三个社交媒体网站的链接。当您将鼠标悬停在 'Contacts' 上时，这些链接会显示在下拉框中。我已将链接放在它们自己的 div 中，这样我就可以在 div 中自定义它们并注意到无论我更改什么，[= 中都有额外的 space 22=] 就好像我在链接上添加了边距一样。我可以很好地更改宽度，但每个框中的文本上方和下方都有 space。我希望 space 消失，所以结果只有 3 行文本位于彼此下方，而不是 3 个块。我做错了什么？我应该使用其他东西而不是 divisions 吗？此外，我在链接中添加了粉红色边框，使额外的 space 更加可见。
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%;
}
<!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>
如果我理解这个问题，您看到的是 h5 上的默认边距。您已经定义了 padding: none; margin: none; 这将消除该边距...如果 none 是 margin/padding 的有效值，但它不是，所以这些行在您的样式表。改为 0 。如果您希望链接彼此重叠，请删除 <br> 并将 clear: left; 添加到 .link，如果您想创建垂直 space，请使用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%;*/
}
<!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>
<div class="link">
<a href="#" target="_blank">
<h5>Twitter</h5>
</a>
</div>
<div class="link">
<a href="https://soundcloud.com/l4-e" target="_blank">
<h5>Soundcloud</h5>
</a>
</div>
</div>
</div>
</div>
</figure>