title: Inline-block elements are ignoring padding
body: <p>I have some divs that I wanted to appear side by side, and i wanted them to look like buttons, so i added a background and padding. But I see that for some reason the top padding of the first div is not appearing. </p>
  
  <p>(In my browser the bottom padding was missing from the last one too, but this doesn't appear in the code example.)</p>
  
  <p>I can't figure out why this is, who can offer a solution?
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div.i-see-also-link
  {
      display:inline-block;
      padding-top:20px;
      padding: 20px;
      background-color:blanchedalmond;
      height:10px;
      border: solid 1px black;
  }
  .i-section-heading {
      padding-bottom: 50px;
  }
  .i-page-title, h1, h3, h4, .i-section-heading, .i-see-also-sub-heading {
      margin-bottom: -.3em;
  }
  .i-section-heading {
      clear: both;
  }
  .i-page-title, h1, h2, h3, h4, .i-section-heading, .i-see-also-sub-heading {
      color: #222;
  }
  h2, .i-section-heading {
      font-size: 1.75em;
  }
  
  div {
      display: block;
  }
  body {
      color: #222;
      font-style: normal;
  }
  body {
      font-family: 'Segoe UI',Segoe,'Segoe WP','Helvetica Neue',Helvetica,sans-serif;
      font-weight: normal;
      font-size: 100%;
      margin: 0;
  }
  .i-section-content &gt; :first-child, .i-description-content &gt; :first-child, .i-returns-content &gt; :first-child, .i-description &gt; :first-child, .i-section-content .i-first-child, .i-description-content .i-first-child, .i-returns-content .i-first-child, .i-description .i-first-child {
      padding-top: 0;
      margin-top: 0;
  }
  div.i-see-also-link {
      display: inline-block;
      padding-top: 20px;
      padding: 20px;
      background-color: blanchedalmond;
      height: 10px;
      border: solid 1px black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="i-section-heading" id="i-seealso-section-heading"&gt;&lt;span class="i-section-heading-icon"&gt;&lt;!-- --&gt;&lt;/span&gt;&lt;span class="i-section-heading-text"&gt;See Also&lt;/span&gt;&lt;/div&gt;&lt;div id="i-seealso-section-content" class="i-section-content" style="display: block;"&gt;&lt;div class="i-see-also-link"&gt;
  &lt;a href="A1R_pMonthlyDebitProcess.html"&gt;Monthly&lt;/a&gt;&lt;/div&gt;
  &lt;div class="i-see-also-link"&gt;
  &lt;a href="A1R_fBillingUtility.html"&gt;Daily&lt;/a&gt;&lt;/div&gt;
  &lt;div class="i-see-also-link"&gt;
  &lt;a href="A1R_fBillingUtilityFilters.html"&gt;Annually&lt;/a&gt;&lt;/div&gt;
  &lt;!--DXMETADATA end--&gt;
  &lt;/div&gt;&lt;div id="i-footer-content" class="i-footer-content"&gt;
                  &lt;!--DXMETADATA start type="Scrap" condition="communityenabled" name="_COMMUNITY_FOOTER" --&gt;&lt;!--DXMETADATA end --&gt;
  &lt;!--DXMETADATA start type="Variable" name="CopyrightNotice" format="&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;hr style=""height: 1px"" /&gt;&lt;p&gt;%%variable%%&lt;/p&gt;" --&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;p&gt;&amp;nbsp;&lt;/p&gt;&lt;hr style="height: 1px"&gt;&lt;p&gt;bla bla bla&lt;/p&gt;&lt;!--DXMETADATA end --&gt;
  &lt;!--DXMETADATA start type="Variable" name="FeedbackLink" format="" --&gt;&lt;p&gt;For more information visit theKnowledge Center&lt;/p&gt;&lt;!--DXMETADATA end--&gt;
              &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>