塊元素間垂直間的神祕間隙

Question

[已解決]我回答了我自己的問題，但Stack Overflow不允許我將自己的帖子設置爲2天的答案。謝謝！ :)

如何擺脫這兩個塊元素之間的小差距？我曾嘗試將空白設置爲none，並將所有margin/padding設置爲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並將其分隔一定高度，您應該設置。如果你想擺脫所有的空白，你還需要設置margin-top: 0;.mobile-navigation > ul