ブロック要素間の奇妙なギャップ

Question

[解決済み]自分の質問に答えましたが、Stack Overflowで2日間の回答として自分の投稿を設定することはできません。ありがとう！ :)

これらの2つのブロック要素の小さなギャップを取り除く方法を教えてください。私は空白をnoneに設定し、すべての余白/パディングを0に設定しようとしました。私はGoogle Chrome Inspector Toolでそれを調べると、ギャップを引き起こしていると思われるものを見つけることができません。それはどうですか？

これは、インライン要素ではないため、ほかの人が持つように見えるインラインブロックのギャップとは関係ありません。私はまた、子要素の位置を変更しようとしましたが、どちらもうまくいきませんでした。

この問題は「クリアフィックス」の問題と関係しますか？私はそれを使うべきですか？私は非常に初心者のプログラマーですので、この単純な問題を見落としているかもしれませんが、私はすべてを試したと感じています。

[注記]：私はcssもリセットしていますので、ブラウザのスタイルシートには含まれていません。

ここには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>

Answer 1

追加行の高さ：0。モバイルヘッダーに問題を修正しました。

Answer 2

.metaはがinline-boxに設定されていますが、それが問題です。

これをblockに設定して、ある程度高さに調整してください。すべての空白を取り除きたい場合は、.mobile-navigation > ulに