title: Getting Rid of Extra Height - CSS Reset?
body: <p>I am trying to figure out how to get rid of extra height in my inner <code>&lt;div&gt;</code> which contain <code>&lt;img&gt;</code> tags. I have tried a css reset but it isn't doing a full reset as far as I can tell.</p>
  
  <p>In the HTML and CSS below, I have 3 <code>&lt;img&gt;</code> tags stacked vertically, each 32px. I want there to be no room between them and the <code>&lt;div&gt;</code> which contains them, I expect to have a height of 96px. You can see in the <a href="https://jsfiddle.net/mseifert/0zk29nsy/" rel="nofollow noreferrer">js fiddle</a>, that there is space between the <code>&lt;img&gt;</code> tags and the inner div has a height > 100px.</p>
  
  <p><strong>UPDATE</strong> The possible duplicate post linked to explains well what is happening:</p>
  
  <blockquote>
    <p>By default, an image is rendered inline, like a letter. It sits on the
    same line that a, b, c and d sit on. There is space below that line
    for the descenders you find on letters like f, j, p and q. You can
    adjust the vertical-align of the image to position it elsewhere.</p>
  </blockquote>
  
  <p>However, adjusting the <code>vertical-align: top</code> did not completely solve the problem since there was still extra height. In my case, it was necessary to set <code>line-height:0</code> to completely remove all extra height.</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div class="ss-buttons"&gt;
    &lt;div class="outer"&gt;
      &lt;div class="inner"&gt;
  
        &lt;a&gt;&lt;img src="http://www.static.mseifert.com/img-common/blank.gif" class="ss-zoom sprite-32"&gt;&lt;/a&gt;
        &lt;a&gt;&lt;img src="http://www.static.mseifert.com/img-common/blank.gif" class="ss-zoom sprite-32"&gt;&lt;/a&gt;
        &lt;a&gt;&lt;img src="http://www.static.mseifert.com/img-common/blank.gif" class="ss-zoom sprite-32"&gt;&lt;/a&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS</p>
  
  <pre><code>html,
  body {
    min-width: 100%;
    height: initial;
  }
  
  body {
    line-height: 1;
  }
  
  html,
  body,
  div,
  span,
  a,
  img,
  p,
  pre {
    border: 0;
    padding: 0;
    margin: 0;
  }
  
  img.sprite-32 {
    display: inline-block;
    width: 44px;
    height: 32px;
    z-index: 0;
  }
  
  .outer {
    width: 44px;
    display: inline-block;
    position: relative;
    height: 96px;
  }
  
  .inner {
    width: 44px;
    position: absolute;
    display: inline-block;
    left: 0px;
    z-index: 2000;
    top: 0px;
  }
  
  a {
    display: inline-block;
    height: 32px;
  }
  
  img.ss-zoom {
    background: url(http://www.static.mseifert.com/img-common/slideshow-zoom-sprite.png) no-repeat 0px 0px scroll;
  }
  
  div.ss-buttons img {
    border: none;
    background-color: green;
  }
  </code></pre>