CODEWITHSUNDEEP
htmlcss
PRIVM
PRIVM

Reputation: 5

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

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;
}
<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>

Upvotes: 0

Views: 1901

Answers (2)

j3ff
j3ff

Reputation: 6089

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">
  </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>

Upvotes: 1

Pervez Choudhury
Pervez Choudhury

Reputation: 2912

Add the following css 

img {  
 display: block;
}

Your img tag is also malformed - it should look like this:

<img src="img/logo.png" width="400em" height="150em" />

Upvotes: 0

Related Questions