HTML/CSS奇怪的間距

Question

在細化我網站的橫幅/導航欄時，我發現了div之間的一些奇怪的間距。這裏有兩個鏈接顯示我在JSFiddle中的問題。 Link 1 |我使用PHP來確定顯示哪些內容，所以我需要兩個來證明這兩個可能性的問題。

我花了大約3個小時擺弄代碼，試圖找出發生了什麼，以及如何解決它，但無濟於事。我似乎無法確定是什麼導致了這個問題。

編輯：我發現奇怪的是綠色和黑色邊框之間的差距。

我的代碼（來自的jsfiddle）：

鏈接1個HTML：

<div id="banner"> 
    <div id="bannerleft"></div> 
    <div id="bannercenter"> 
     <div id="nav_content"> 
      <ul> 
       <li> 
        <div><a href="../">Home</a> 
        </div> 
       </li> 
       <li>|</li> 
       <li> 
        <div><a href="forum">Forums</a> 
        </div> 
       </li> 
       <li>|</li> 
       <li> 
        <div><a href="market">Market</a> 
        </div> 
       </li> 
      </ul> 
     </div> 
    </div> 
    <div id="bannerright"> 
     <div id=accountcontent> <span><a href="login">Login</a> | <a href="register">Register</a></span> 

     </div> 
    </div> 
</div> 

鏈路1周的CSS：

#banner { 
    height: 30px; 
    width: 100%; 
    display: table; 
    margin-bottom: 20px; 
} 
#bannerleft { 
    display: table-cell; 
    text-align: left; 
    outline-color: black; 
    outline-style: dashed; 
    width: 33.33%; 
} 
#bannercenter { 
    display: table-cell; 
    text-align: center; 
    outline-color: black; 
    outline-style: dashed; 
    padding: 0px; 
    height:30px; 
    width: 33.33%; 
} 
#nav_content { 
    height: 30px; 
    margin: 0 auto; 
    padding: 0px; 
    outline-color: green; 
    outline-style: dashed; 
} 
#nav_content ul { 
    height: 30px; 
    margin: 0 auto; 
    padding: 0px; 
} 
#nav_content ul li { 
    display: inline-block; 
    list-style: none; 
    line-height: 30px; 
} 
#nav_content ul li div { 
    height: 30px; 
} 
#bannerright { 
    display: table-cell; 
    text-align: center; 
    outline-color: black; 
    outline-style: dashed; 
    padding: 0px; 
    height:30px; 
    width: 33.33%; 
} 
#accountcontent { 
    outline-color: green; 
    outline-style: dashed; 
    height:30px; 
} 

鏈路2 HTML：

<div id="banner"> 
    <div id="bannerleft"></div> 
    <div id="bannercenter"> 
     <div id="nav_content"> 
      <ul> 
       <li> 
        <div><a href="../">Home</a> 
        </div> 
       </li> 
       <li>|</li> 
       <li> 
        <div><a href="forum">Forums</a> 
        </div> 
       </li> 
       <li>|</li> 
       <li> 
        <div><a href="market">Market</a> 
        </div> 
       </li> 
      </ul> 
     </div> 
    </div> 
    <div id="bannerright"> 
     <div id=accountcontent><a href="account"><img id="avatarsmall" src=""/>AccountName</a> 
     </div> 
    </div> 
</div> 

鏈路2 CSS：

#banner { 
    height: 30px; 
    width: 100%; 
    display: table; 
    margin-bottom: 20px; 
} 
#bannerleft { 
    display: table-cell; 
    text-align: left; 
    outline-color: black; 
    outline-style: dashed; 
    width: 33.33%; 
} 
#bannercenter { 
    display: table-cell; 
    text-align: center; 
    outline-color: black; 
    outline-style: dashed; 
    padding: 0px; 
    height:30px; 
    width: 33.33%; 
} 
#nav_content { 
    height: 30px; 
    margin: 0 auto; 
    padding: 0px; 
    outline-color: green; 
    outline-style: dashed; 
} 
#nav_content ul { 
    height: 30px; 
    margin: 0 auto; 
    padding: 0px; 
} 
#nav_content ul li { 
    display: inline-block; 
    list-style: none; 
    line-height: 30px; 
} 
#nav_content ul li div { 
    height: 30px; 
} 
#bannerright { 
    display: table-cell; 
    text-align: center; 
    outline-color: black; 
    outline-style: dashed; 
    padding: 0px; 
    height:30px; 
    width: 33.33%; 
} 
#accountcontent { 
    outline-color: green; 
    outline-style: dashed; 
    height:30px; 
} 
#avatarsmall { 
    height: 30px; 
    width: 30px; 
    padding: 0px; 
    margin: 0px; 
} 

Answer 1

快速修復，使用vertical-align: top爲#bannercenter，這是不推薦的。如果您希望按照語義和可讀性來完成，請繼續閱讀。

我不確定你到底在做什麼，但是使用上下文類將會對你有所幫助。我懷疑你的問題是與line-height和margin有關。修復方法是爲<ul> s製作line-height: 1; margin: 0;。並且使用display: table或display: table-cell並不是一個好主意。而是使用inline-block或flexbox。

.parent {border: 1px dashed blue; text-align: center;} 
 
.child-one {display: inline-block; border: 1px dashed red; margin: 0 5px; padding: 5px; width: 33%;} 
 
.child-two {display: inline-block; border: 1px dashed green; margin: 0 5px; padding: 5px; width: 33%;}

<div class="parent"> 
 
    <div class="child-one">Home</div> 
 
    <div class="child-two">Office</div> 
 
</div>

---

可能是，如果你想有三列，並使用一列作爲補償（使內容居中），然後使用下一列中顯示其他的事情，你可以使用下面的代碼：

* {font-family: Segoe UI, sans-serif;} 
 
header {overflow: hidden;} 
 
header ul, 
 
header ul li {margin: 0; padding: 0; list-style: none; float: left;} 
 
header ul li {margin-right: 10px;} 
 
header a {text-decoration: none; color: #09f;} 
 
header a:hover {color: #33f;} 
 

 
header ul.main-menu {margin-left: 35%;} 
 
header ul.sub-menu {float: right;} 
 
header .acct-settings {float: right;} 
 

 
.acct-settings {position: relative; min-height: 32px; padding-left: 40px;} 
 
.acct-settings a, 
 
.acct-settings span {display: block; width: 100px;} 
 
.acct-settings a.thumb {position: absolute; left: 0; top: 5px; width: 32px;} 
 
.acct-settings a.thumb img {font-weight: bold;}

<header> 
 
    <ul class="main-menu"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Forums</a></li> 
 
    <li><a href="#">Market</a></li> 
 
    </ul> 
 
    <ul class="sub-menu"> 
 
    <li><a href="#">Register</a></li> 
 
    <li><a href="#">Sign In</a></li> 
 
    </ul> 
 
</header> 
 
<hr /> 
 
<header> 
 
    <ul class="main-menu"> 
 
    <li><a href="#">Home</a></li> 
 
    <li><a href="#">Forums</a></li> 
 
    <li><a href="#">Market</a></li> 
 
    </ul> 
 
    <div class="acct-settings"> 
 
    <a href="#" class="thumb"> 
 
     <img src="http://placehold.it/32x32" alt="" /> 
 
    </a> 
 
    <a href="#">User Name</a> 
 
    <span>Designation</span> 
 
    </div> 
 
</header>

遵循標準編碼實踐並使用語義標籤是一個好主意。

Answer 2

添加vertical-align: top到#bannercenter：

https://jsfiddle.net/d5d83uvd/1/

默認情況下表格單元格（包括CSS display: table-cell）有vertical-align: middle，所以如果存在有較高含量的任何同級表格單元格，在不太高大的內容細胞可能出現在垂直中間。