How to remove the gap between div in html/css?

Question

In my webpage, there is an unknown gap between div and there is a white space on the top of my navigation bar. I have set the margin and padding of the body to 0 but the problem still exists.

I know there is a similar post, but I do not think there is any solution mentioned in that post. Also, as you can see, I added margin-top to the negative value to get rid the unknown space at navigation bar, but it is an inefficient way.

Can anybody help me with this issue?

Here's the code:

html {
  background: url(images/bg.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
  margin: 0;
  border: 0;
  padding: 0;
}

header {
  margin-top: -17px;
  background: #007400;
}

#header_inner {
    width: 90%;
    margin: 0 auto;
    font-weight: 300;
}

header::after {
    content: "";
    display: table;
    clear: both;
}

.menu {
    float: right;
    color: #eeeeee;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 15px;
}

.header2 {
    margin: 0;
    padding: 0;
    list-style: none;
}

.header2 li {
    display: inline-block;
    margin-left: 40px;
    padding-top: 23px;
    position: relative;
}

nav a:hover {
    color: #fff;
}

nav a:before {
    content: "";
    display: block;
    height: 5px;
    background-color: #fff;
    position: absolute;
    top: 0;
    width: 0%;
    transition: all ease-in-out 200ms;
}

nav a:hover::before {
    width: 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <link href="css/jquery.bxslider.css" rel="stylesheet" />
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <title>Home Page</title>
</head>

<body>
  <header>
    <div id="header_inner">
      <a href="home_page.html"></a>
      <nav class="menu">
        <a href="#" id="menu_icon"></a>
        <ul class="header2">
          <li><a href="home_page.html" class="current">Home</a></li>
          <li><a href="#">Profile</a></li>
          <li><a href="#">Career</a></li>
          <li><a href="#">Logout</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <p>hello</p>
</body>

</html>

check your posted code, there is no white space. hence try to add all affecting css. — Mhd Alaa Alhaj, Dec 11 '17 at 12:27

score 1 · Answer 1 · answered Dec 11 '17 at 12:17

It was because of margins and padding of your <ul> element

html {
  background: url(images/bg.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
  margin: 0;
  border: 0;
  padding: 0;
}

ul {
    padding: 0;
    margin: 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <link href="css/jquery.bxslider.css" rel="stylesheet" />
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <title>Home Page</title>
</head>

<body>
  <header>
    <div id="header_inner">
      <a href="home_page.html"></a>
      <nav class="menu">
        <a href="#" id="menu_icon"></a>
        <ul class="header2">
          <li><a href="home_page.html" class="current">Home</a></li>
          <li><a href="#">Profile</a></li>
          <li><a href="#">Career</a></li>
          <li><a href="#">Logout</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <p>hello</p>
</body>

</html>

This helps me eliminate the white space exist on top of the navigation bar but how about the hello part? There is still a gap between each div which I have no idea why it appears. — TeckBeng, Dec 11 '17 at 12:26
The thing you can do is to open your inspector by pressing f12 and point all your elements in the inspector. You will get all the info about paddings and margins of all elements that need to be deleted — JSEvgeny, Dec 11 '17 at 12:45

score 0 · Answer 2 · answered Dec 11 '17 at 12:19

try this one

instead of

header {
 // margin-top: -17px;
}

this give margin to p tag

p{
  margin-top:-17px;
  }

html {
  background: url(images/bg.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body {
  margin: 0;
  border: 0;
  padding: 0;
}

header {
  // margin-top: -17px;
}

p {
  margin-top: -17px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <link href="css/jquery.bxslider.css" rel="stylesheet" />
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <title>Home Page</title>
</head>

<body>
  <header>
    <div id="header_inner">
      <a href="home_page.html"></a>
      <nav class="menu">
        <a href="#" id="menu_icon"></a>
        <ul class="header2">
          <li><a href="home_page.html" class="current">Home</a></li>
          <li><a href="#">Profile</a></li>
          <li><a href="#">Career</a></li>
          <li><a href="#">Logout</a></li>
        </ul>
      </nav>
    </div>
  </header>
  <p>hello</p>
</body>

</html>

score 0 · Answer 3 · answered Dec 11 '17 at 12:46

html {
  background: url(images/bg.png) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

* {
  margin: 0;
  border: 0;
  padding: 0;
}

ul {
    padding: 0;
    margin: 0;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="style.css">
  <link href="css/jquery.bxslider.css" rel="stylesheet" />
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.1.1.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  <title>Home Page</title>
</head>

<body>
  <header>
    <div id="header_inner">
      <a href="home_page.html"></a>
      <nav class="menu">
        <a href="#" id="menu_icon"></a>
        <ul class="header2">
          <li><a href="home_page.html" class="current">Home</a></li>
          <li><a href="#">Profile</a></li>
          <li><a href="#">Career</a></li>
          <li><a href="#">Logout</a></li>
        </ul>
      </nav>
    </div>
  </header>

  <p>hello</p>
</body>

</html>

I figured the answer which u change the body in css to *.

How to remove the gap between div in html/css?

3 Answers3