Keresztes Erik Keresztes Erik - 6 months ago 14
CSS Question

Html - space between logo and navbar

I can't seem to figure out why this happens:
image

I can't find an error, i tried many solutions but they didn't solve the problem. Plz help

Html:

<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="css.css"/>
<link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400italic' rel='stylesheet' type='text/css'>
</head>
<body>
<a href="index.html" class="logo"><img src="img/logo.png" width=400em height=150em</img></a>
<div>
<ul>
<li><a class="active" href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</body>
</html>


Css:

body{
margin:0;
padding:0;
}
.logo{
margin:0;
padding:0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000;
}

li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover {
background-color: #111;
}

.active{
background-color: #222;
}


stack overflow doesnt let me post this so i'm writing this

Answer

Added display: block; on the image ...

body {
  margin: 0;
  padding: 0;
}
.logo {
  margin: 0;
  padding: 0;
}
.logo img {
  display: block;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #000;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #111;
}
.active {
  background-color: #222;
}
<!DOCTYPE HTML>
<html>

<head>
  <title></title>
  <meta charset="utf-8" />
  <link rel="stylesheet" href="css.css" />
  <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed:400,400italic' rel='stylesheet' type='text/css'>
</head>

<body>
  <a href="index.html" class="logo">
    <img src="img/logo.png" width=400em height=150em</img>
  </a>
  <div>
    <ul>
      <li><a class="active" href="index.html">Home</a>
      </li>
      <li><a href="about.html">About</a>
      </li>
    </ul>
  </div>
</body>

</html>