Inconsistent distance between links in navigation bar

Question

I've been working on a simple horizontal navigation bar using html, css and javascript. The navigation bar contains a dropdown menu (named More). Clicking on the More menu causes hidden links to be shown (vertically) beneath the More heading, and clicking again causes the links to be hidden again.

I set the margin for all links in the navigation bar to be 2px (in the css file), but the distance between the links doesn't appear consistent. Specifically, after clicking on More, the distance between Options 4 and 5, and the distance between Options 5 and 6, is different to the distances between the other links. Do you know what causes this problem?

Screenshot

function clickMoreMenu() {
  var x = document.getElementById("hiddenlinks");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

#navbar {
  display: block;
  width: 425px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
}

.navoption {
  text-align: center;
  display: block;
  float: left;
}

#moremenu {
  display: block;
}

#hiddenlinks {
  display: none;
  position: absolute;
  z-index: 1;
  margin-top: 0px;
}

#navbar a {
  display: block;
  text-align: center;
  text-decoration: none;
  padding-top: 10px;
  padding-bottom: 10px;
  width: 100px;
  color: Blue;
  background: Yellow;
  border-style: solid;
  border-color: Blue;
  border-width: 1px;
  margin: 2px;
}

#navbar a.currentpage {
  color: DarkBlue;
  background: Gold;
}

#navbar a:hover {
  background: Blue;
  color: Yellow;
}

h1 {
  color: blue;
  text-align: center;
}

.clearleft {
  clear: left;
}

<h1>Distance Test</h1>
<nav id="navbar">
  <div class="navoption">
    <a href="index.html" class="currentpage">Index</a>
  </div>
  <div class="navoption">
    <a href="option2.html">Option 2</a>
  </div>
  <div class="navoption">
    <a href="option3.html">Option 3</a>
  </div>
  <div class="navoption" id="moremenu">
    <a href="javascript:void(0);" onclick="clickMoreMenu()">More...</a>
    <div id="hiddenlinks">
      <a href="option4.html">Option 4</a>
      <a href="option5.html">Option 5</a>
      <a href="option6.html">Option 6</a>
    </div>
  </div>
</nav>

<div class="clearleft">Some text.</div>

Consider not using floats for layout any more? Consider using flexbox for 1 dimensional layouts like columns/rows? — evolutionxbox, Feb 24 '21 at 17:57
You've been bitten by collapsing margins. See [docs](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing) and [this question](https://stackoverflow.com/questions/3069921/what-is-the-point-of-css-collapsing-margins) — chazsolo, Feb 24 '21 at 17:57
@chazsolo Collapsing margins, that was it. One possible solution is to set two margins instead of four, e.g. set margin-right and margin-bottom but not margin-left or margin-top. — mfl1971, Feb 25 '21 at 17:49

bron · Answer 1 · 2021-02-24T18:56:44.210

With some modifications on your css you can use this.

Note: remove in the css 1 of the 2 options!

function clickMoreMenu() {
  var x = document.getElementById("hiddenlinks");
  if (x.style.display == "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

#navbar {
  display: block;
  width: 425px;
  margin: 0px auto 20px auto;
}
.navoption {
  display: block;
  float: left;
  /* next line relative because #hiddenlinks is absolute */
  position: relative;
  text-align: center;
}
#hiddenlinks {
  display: none;
  position: absolute;
  top: 100%;
  left: 0%;
  z-index: 1;
}
#navbar a {
  box-sizing: border-box; /* keep padding & border in the button */
  display: block;
  width: 100px;
  margin: 2px;
  padding-top: 10px;
  padding-bottom: 10px;
  border: 1px solid blue;
  text-align: center;
  text-decoration: none;
  color: blue;
  background: yellow;
}

/* option 1: all submenu items small gaps */
#navbar > div:last-child > a {
  margin-bottom: 0;
}

/* OR option 2: all submenu items same gap as topmenu */
#navbar #hiddenlinks a {
  margin-bottom: 4px;
}

#navbar a.currentpage {
  color: darkblue;
  background: gold;
}
#navbar a:hover,
#navbar a:active {
  background: blue;
  color: yellow;
}
h1 {
  color: blue;
  text-align: center;
}
.clearleft {
  clear: left;
}

<h1>Distance Test</h1>
<nav id="navbar">
  <div class="navoption">
    <a href="index.html" class="currentpage">Index</a>
  </div>
  <div class="navoption">
    <a href="option2.html">Option 2</a>
  </div>
  <div class="navoption">
    <a href="option3.html">Option 3</a>
  </div>
  <div class="navoption" id="moremenu">
    <a href="javascript:void(0);" onclick="clickMoreMenu()">More...</a>
    <div id="hiddenlinks">
      <a href="option4.html">Option 4</a>
      <a href="option5.html">Option 5</a>
      <a href="option6.html">Option 6</a>
    </div>
  </div>
</nav>

Inconsistent distance between links in navigation bar

1 Answers1