Why is my last inline-block element pushed down?

Question

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?

Add vertical-align: top; to .mapSection – Liquidchrome Jun 13 '17 at 19:34 — Liquidchrome, Jun 13 '17 at 19:34

score 5 · Accepted Answer · answered Jun 13 '17 at 19:36

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>

score -3 · Answer 2 · answered Jun 13 '17 at 19:47

Simplify your code using 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>

Why is my last inline-block element pushed down?

2 Answers2