Hey,
mich wundert es immer wenn ich display:inline-block bei der navigation benutze das ich trotz keinem zugewiesenem padding oder margin einen abstand zwischen den a tags habe.
siehe -> http://prnt.sc/cj1h6q
Warum ist das denn so ?
Mein codeschnipsel:
HTML
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<link href="navi.css" rel="stylesheet">
</head>
<body>
<nav id="nav">
<ul>
<li><a href="#">Punkt1</a></li>
<li><a href="#">Punkt2</a></li>
<li><a href="#">Punkt3</a></li>
<li><a href="#">Punkt4</a></li>
</ul>
</nav>
</body>
</html>
Alles anzeigen
CSS
CSS
*{
margin: 0;
padding: 0;
font-family: Verdana, sans-serif;
}
body{
width: 100%;
}
#nav{
background: linear-gradient(45deg, yellow -30%, aquamarine 100%);
width: 100%;
padding: 20px 0px 20px 0px;
}
ul{
list-style-type: none;
}
li{
display: inline-block;
padding: 20px;
width: 20%
}
a{
text-decoration: none;
color: black;
font-size: 16pt;
padding: 20px
}
Alles anzeigen
Gruß, Stef