为什么我的最后一个内联块元素被压低了？

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>

第三个内联块元素被向下推到 20px 左右，如下所示：

           POWER ON       SERVICES
                                         SUPPORT         

是什么导致最后一个内联块元素以这种方式显示？

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>