How to get rid of the space between divs

Question

I have a thick white line on my webpage in between two divs and every time I delete my <ul> in the second div the white line goes away. How do I delete the white line and keep my <ul>? I have tried removing all of the CSS elements, without success. Even with an empty <ul> the space is there...

.header {
  width: 100%;
  height: 410px;
  background-color: #040104;
  text-align: center;
}
.nav {
  width: 100%;
  height: 50px;
  background-color: #040104;
  font-family: sans-serif;
  text-align: center;
}
.nav li {
  display: inline;
  color: #ce5e27;
  font-size: xx-large;
}
.nav ul li a {
  padding: 1em;
  color: #ce5e27;
  text-decoration: none;
}
.contentContainer {
  height: 600px;
  background-color: #040104;
}
.content {
  width: 60%;
  height: 200%;
  float: left;
  background-color: #040104;
  text-align: center;
}
.content h1 {
  font-family: sans-serif;
  font-size: x-large;
  color: #ce5e27;
}
.thumbnail {
  width: 40%;
  height: 200%;
  background-color: #040104;
  float: right;
  text-align: center;
}
.thumbnail h1 {
  font-family: sans-serif;
  font-size: large;
  color: #ce5e27;
}
.footer {
  clear: both;
  width: 100%;
  height: 60px;
  background-color: black;
  font-family: sans-serif;
  text-align: center;
}
.footer li {
  display: inline;
  color: #ce5e27;
  font-size: large;
}
.footer h1 {
  color: #ce5e27;
  font-size: small;
  text-align: center;
  font-family: sans-serif;
}

<div class="header">
  <img src="images/basketball-rims-header.gif">
</div>
<div class="nav">
  <ul>
    <li> <a href="index.html">Home</a></li>
    <li>|</li>
    <li> <a href="http://www.nba.com/news/">News</a></li>
    <li>|</li>
    <li> <a href="http://stats.nba.com/players/?ls=iref:nba:gnav">Players</a></li>
    <li>|</li>
    <li> <a href="http://www.nba.com/teams/?ls=iref:nba:gnav">Teams</a></li>
    <li>|</li>
  </ul>
</div>

Use the browsers console (usually ``) to identify the styles being applied to the `
`. By default, all user-agents have a base stylesheet. It's entirely possible that the base stylesheet adds a `margin` and possibly even a `padding` to all `
` elements seeing as they're block elements. If so, you'll need to override these styles. A better solution would be to use a CSS reset which overrides base stylesheets and provides a consistent initial look across the browsers. [Here](http://meyerweb.com/eric/tools/css/reset/) is an example of one such reset... — War10ck, Nov 04 '15 at 17:22

score 6 · Answer 1 · answered Nov 04 '15 at 17:23

6

Your <ul> automatically comes with a margin. Set the margin to 0:

.nav ul{
    margin-top: 0px;
}

answered Nov 04 '15 at 17:23

JstnPwll

8,585
2
33
56

score 0 · Answer 2 · answered Nov 04 '15 at 17:24

To get rid of the white line you can add margin: 0 to your ul element.

Demo:

.header {
  width: 100%;
  height: 410px;
  background-color: #040104;
  text-align: center;
}
ul {
  margin: 0;  
}
.nav {
  width: 100%;
  height: 50px;
  background-color: #040104;
  font-family: sans-serif;
  text-align: center;
}
.nav li {
  display: inline;
  color: #ce5e27;
  font-size: xx-large;
}
.nav ul li a {
  padding: 1em;
  color: #ce5e27;
  text-decoration: none;
}
.contentContainer {
  height: 600px;
  background-color: #040104;
}
.content {
  width: 60%;
  height: 200%;
  float: left;
  background-color: #040104;
  text-align: center;
}
.content h1 {
  font-family: sans-serif;
  font-size: x-large;
  color: #ce5e27;
}
.thumbnail {
  width: 40%;
  height: 200%;
  background-color: #040104;
  float: right;
  text-align: center;
}
.thumbnail h1 {
  font-family: sans-serif;
  font-size: large;
  color: #ce5e27;
}
.footer {
  clear: both;
  width: 100%;
  height: 60px;
  background-color: black;
  font-family: sans-serif;
  text-align: center;
}
.footer li {
  display: inline;
  color: #ce5e27;
  font-size: large;
}
.footer h1 {
  color: #ce5e27;
  font-size: small;
  text-align: center;
  font-family: sans-serif;
}

<div class="header">
  <img src="images/basketball-rims-header.gif">
</div>
<div class="nav">
  <ul>
    <li> <a href="index.html">Home</a>
    </li>
    <li>|</li>
    <li> <a href="http://www.nba.com/news/">News</a>
    </li>
    <li>|</li>
    <li> <a href="http://stats.nba.com/players/?ls=iref:nba:gnav">Players</a>
    </li>
    <li>|</li>
    <li> <a href="http://www.nba.com/teams/?ls=iref:nba:gnav">Teams</a>
    </li>
    <li>|</li>
  </ul>
</div>

How to get rid of the space between divs

2 Answers2