Mysterious Gap Vertically Between Block Elements

Question

[SOLVED] I answered my own question, but Stack Overflow will not allow me to set my own post as the answer for 2 days. Thanks! :)

How do I get rid of the small gap between these two block elements? I have tried setting the white space to none, and all the margins/padding to 0. When I inspect it with Google Chrome Inspector Tool, I cannot find what seems to be causing the gap. How is it there?

This does not have to do with the inline-block gap that everyone else seems to have since they are not inline elements. I have also tried changing the position on the child element, but that did not work either.

Does this issue have to do with that "clear fix" thing? Should I use that? I am an extremely beginner programmer so maybe I am overlooking this simple problem, but I feel that I have tried everything.

[NOTE]: I have also reset the css, so it is not coming from the browser's stylesheet.

Here is a link to the codepen.

.mobile-navigation {
  position: relative;
  text-align: center;
  list-style: none;
  vertical-align: top;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.4s ease;
  transition: max-height 0.4s ease;
}
.open {
  max-height: 500px;
}
.mobile-navigation li,
.mobile-navigation a {
  color: white;
  font-size: 12pt;
  font-family: 'Special Elite';
  text-transform: lowercase;
  list-style: none;
  box-sizing: border-box;
}
.mobile-navigation a {
  padding-bottom: 1em;
  padding-right: 8em;
  padding-left: 8em;
}
.mobile-navigation li {
  padding: 1em;
  border-top: 1px solid white;
  background: rgba(0, 0, 0, 0.2);
}
.mobile-navigation a:active,
.mobile-navigation li.current-menu-item > a,
.mobile-navigation li.current-page-parent > a,
.mobile-navigation li.current_page_parent > a,
.mobile-navigation li.current-page-ancestor > a,
.mobile-navigation li.current-menu-parent > a,
.mobile-navigation li.current-menu-ancestor > a,
.mobile-navigation a:hover {
  color: tan !important;
  font-weight: bold !important;
}
.mobile-navigation .sub-menu {
  display: none;
  list-style-type: none;
  padding-bottom: 0.2em;
}
mobile-navigation li.current-menu-item > ul.sub-menu,
.mobile-navigation li.current-menu-item li.menu-item-has-children > ul.sub-menu,
.mobile-navigation li.current-page-ancestor > ul.sub-menu {
  display: block !important;
}
/* Hamburger */

.hamburger {
  padding: 1em;
  display: inline-block;
  float: left;
  box-sizing: border-box;
}
.mobile-header .meta {
  display: inline-block;
  width: 100%;
  position: relative;
  box-sizing: border-box;
  background: black;
}
.mobile-header img {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 30px;
  width: auto;
  display: inline-block;
  position: absolute;
}
.mobile-header .site-branding {
  margin: 0;
  padding: 0;
}
.hamburger-line {
  border-bottom: 4px solid white;
  width: 35px;
  margin-bottom: 6px;
}
.hamburger-line:last-child {
  margin-bottom: 0;
}
* {
  padding: 0;
  margin: 0;
}

<div class="mobile-header">

  <div class="meta">

    <div href="#" class="hamburger">
      <div class="hamburger-line"></div>
      <div class="hamburger-line"></div>
      <div class="hamburger-line"></div>
    </div>


    <img src="www.example.com/image" />

  </div>

  <div class="mobile-navigation open">
    <ul>
      <li><a href="http://localhost:8888/">Overview</a>
      </li>
      <li><a href="http://localhost:8888/blog/">Blog</a>
      </li>
      <li><a href="http://localhost:8888/about/">About</a>
      </li>
      <li><a href="http://localhost:8888/contact/">Contact</a>
      </li>
    </ul>
  </div>

</div>

The space is caused because your element is an inline-block. Not a block. — Oriol, Aug 20 '16 at 22:11
Not true. It was caused by the default `vertical-align: baseline`. Your `line-height: 0` just collapses the entire line so `vertical-align` no longer has distinguishable effects. Just like nuking Earth to kill a mosquito, but yes, it works. Anyways, did you even read the duplicate? Your `line-height: 0` is already there. — Oriol, Aug 20 '16 at 22:17
My bad. I am an extremely beginner programmer. I see what you mean, and what Memo was explaining below. Great metaphor. — ERIC, Aug 22 '16 at 03:16
Also, changing vertical align on both of the elements seemed to have no effect for me. — ERIC, Aug 22 '16 at 03:23

score 0 · Answer 1 · answered Aug 20 '16 at 21:57

0

Adding line-height: 0; to mobile-header fixed the issue.

answered Aug 20 '16 at 21:57

ERIC

63
12

Yann · Answer 2 · 2016-08-20T22:05:02.973

0

Your .meta is set to inline-box and that's the problem.

set it to block and div it some height and you should be set. If you want get rid of all the white space, you'll also need to set margin-top: 0; on .mobile-navigation > ul

edited Aug 20 '16 at 22:05

answered Aug 20 '16 at 22:01

Yann

604
2
7
16

I don't think it is, because I fixed the issue by changing the line height of the entire header. – ERIC Aug 20 '16 at 22:02
look at your code: `.mobile-header .meta { display: inline-block; ...` – Yann Aug 20 '16 at 22:06
The issue is already fixed, you can view the codepen for the fix if you'd like. This was not the problem. :P – ERIC Aug 20 '16 at 22:07
1

changing the line height is a work around, not a fix. But if that's good enough for you, it's all good. :) – Yann Aug 20 '16 at 22:08
But how would the meta be causing this? Any help for a real fix is greatly appreciated. :) – ERIC Aug 20 '16 at 22:09

Mysterious Gap Vertically Between Block Elements

2 Answers2