0
Le menu de la barre latérale de mon site Web contient des liens vers trois sites Web de médias sociaux. Lorsque vous passez la souris sur "Contacts", ces liens s'affichent dans la liste déroulante. J'ai mis les liens dans leurs propres divisions afin que je puisse les personnaliser individuellement et j'ai remarqué que peu importe ce que je change, il y a de l'espace supplémentaire dans la div comme si j'avais ajouté une marge aux liens. Je peux changer la largeur bien mais il y a de l'espace au-dessus et au-dessous du texte dans chaque boîte. Je veux que l'espace ait disparu, donc le résultat est juste 3 lignes de texte assis l'une en dessous de l'autre au lieu de 3 blocs. Qu'est ce que j'ai mal fait? Dois-je utiliser autre chose plutôt que des divisions? En outre, j'ai ajouté une bordure rose aux liens pour rendre l'espace supplémentaire plus visible.Espace supplémentaire au-dessus et au-dessous des liens dans les divisions dont je ne peux pas me débarrasser?
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>
Sur Firefox, Chrome et Safari sur Mac, il n'y a pas d'espace entre les liens ... – Johannes