Andrew McCracken Andrew McCracken -4 years ago 64
CSS Question

Why is my last inline-block element pushed down?

Here is my markup:



#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>





The third inline block element is pushed down around 20px like this:

POWER ON SERVICES
SUPPORT


What is causing the last inline-block element to display this way?

Answer Source

It is beacuse the initial value of the vertical align is baseline. Try vertical-algin:top for the .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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download