爲什麼我的最後一個內嵌塊元素被推下？

Question

這裏是我的標記：

#siteMap { 
 
    text-align: center; 
 
    background-color: #26AAE1; 
 
    color: white; 
 
} 
 

 
.mapSection { 
 
    text-align: center; 
 
    width: 32%; 
 
    display: inline-block; 
 
    padding: 0px !important; 
 
    margin: 0 !important; 
 
} 
 

 
.sectionElem { 
 
    display: block; 
 
    color: white; 
 
}

<div id="siteMap"> 
 
    <div class="mapSection"> 
 
    <span style="font-size:20px;font-weight:bold;color:#F15A2A !important;">POWER ON</span> 
 
    <a class="sectionElem">Join Now</a> 
 
    <a class="sectionElem">Free Trial</a> 
 
    <a class="sectionElem">Membership</a> 
 
    </div> 
 
    <div class="mapSection"> 
 
    <span style="font-size:20px;font-weight:bold;color:#F15A2A !important;">SERVICES</span> 
 
    <a class="sectionElem">Download Our App</a> 
 
    <a class="sectionElem">Refer a Friend</a> 
 
    <a class="sectionElem">Member Login</a> 
 
    </div> 
 
    <div class="mapSection" style="top:0"> 
 
    <span style="font-size:20px;font-weight:bold;color:#F15A2A !important;">SUPPORT</span> 
 
    <a class="sectionElem">Map &amp; Directions</a> 
 
    <a class="sectionElem">Contact Us</a> 
 
    </div> 
 
</div>

第三內嵌塊元件圍繞推下20像素這樣的：

  POWER ON  SERVICES 
             SUPPORT   

什麼導致最後的inline-block的元素這樣顯示？

Answer 1

垂直對齊的初始值就是基線。 嘗試vertical-algin:top爲.mapSection

#siteMap{ 
 
text-align: center; 
 
background-color:#26AAE1; 
 
color:white; 
 
} 
 
.mapSection{ 
 
    text-align:center; 
 
    width:32%; 
 
    display:inline-block; 
 
    padding:0px !important; 
 
    margin:0 !important; 
 
     VERTICAL-ALIGN: top; 
 
} 
 
.sectionElem{ 
 
    display:block; 
 
    color:white; 
 
}

<div id="siteMap"> 
 
    <div class="mapSection"> 
 
     <span style="font-size:20px;font-weight:bold;color:#F15A2A !important;">POWER ON</span> 
 
     <a class="sectionElem">Join Now</a> 
 
     <a class="sectionElem">Free Trial</a> 
 
     <a class="sectionElem">Membership</a> 
 
    </div> 
 
     <div class="mapSection"> 
 
     <span style="font-size:20px;font-weight:bold;color:#F15A2A !important;">SERVICES</span> 
 
     <a class="sectionElem">Download Our App</a> 
 
      <a class="sectionElem">Refer a Friend</a> 
 
      <a class="sectionElem">Member Login</a> 
 
    </div> 
 
    <div class="mapSection" style="top:0"> 
 
     <span style="font-size:20px;font-weight:bold;color:#F15A2A !important;">SUPPORT</span> 
 
     <a class="sectionElem">Map &amp; Directions</a> 
 
     <a class="sectionElem">Contact Us</a> 
 
    </div> 
 
    </div>

Answer 2

使用Flexbox的簡化代碼。

#siteMap { 
 
    text-align: center; 
 
    background-color: #26AAE1; 
 
    color: white; 
 
    display: flex; 
 
    justify-content: space-around; 
 
} 
 

 
.sectionElem { 
 
    display: block; 
 
} 
 

 
span { 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
    color: #F15A2A; 
 
}

<div id="siteMap"> 
 
    <div> 
 
    <span>POWER ON</span> 
 
    <a class="sectionElem">Join Now</a> 
 
    <a class="sectionElem">Free Trial</a> 
 
    <a class="sectionElem">Membership</a> 
 
    </div> 
 
    <div> 
 
    <span>SERVICES</span> 
 
    <a class="sectionElem">Download Our App</a> 
 
    <a class="sectionElem">Refer a Friend</a> 
 
    <a class="sectionElem">Member Login</a> 
 
    </div> 
 
    <div> 
 
    <span>SUPPORT</span> 
 
    <a class="sectionElem">Map &amp; Directions</a> 
 
    <a class="sectionElem">Contact Us</a> 
 
    </div> 
 
</div>