Getting Rid of Extra Height - CSS Reset? - html

Question

I am trying to figure out how to get rid of extra height in my inner <div> which contain <img> tags. I have tried a css reset but it isn't doing a full reset as far as I can tell.
In the HTML and CSS below, I have 3 <img> tags stacked vertically, each 32px. I want there to be no room between them and the <div> which contains them, I expect to have a height of 96px. You can see in the js fiddle, that there is space between the <img> tags and the inner div has a height > 100px.
UPDATE The possible duplicate post linked to explains well what is happening:
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.
However, adjusting the vertical-align: top did not completely solve the problem since there was still extra height. In my case, it was necessary to set line-height:0 to completely remove all extra height.
The HTML:
<div class="ss-buttons">
<div class="outer">
<div class="inner">
<a><img src="http://www.static.mseifert.com/img-common/blank.gif" class="ss-zoom sprite-32"></a>
<a><img src="http://www.static.mseifert.com/img-common/blank.gif" class="ss-zoom sprite-32"></a>
<a><img src="http://www.static.mseifert.com/img-common/blank.gif" class="ss-zoom sprite-32"></a>
</div>
</div>
</div>
The CSS
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;
}

Answer 1

Add line-height:0; to .inner
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;
line-height: 0;
}
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;
}
<div class="ss-buttons">
<div class="outer">
<div class="inner">
<a><img src="http://www.static.mseifert.com/img-common/blank.gif" class="ss-zoom sprite-32"></a>
<a><img src="http://www.static.mseifert.com/img-common/blank.gif" class="ss-zoom sprite-32"></a>
<a><img src="http://www.static.mseifert.com/img-common/blank.gif" class="ss-zoom sprite-32"></a>
</div>
</div>
</div>

Answer 2

Add vertical-align: top; to your a element CSS styling (<a>). That will line them all up with no spacing. When you use inline-block, for some reason CSS3 defaults the default vertical-align property to baseline thus the spacing. If you change vertical-align to top it'll remove your spacing issue.
Here's the updated CSS snippet for <a> element styling:
/* ...rest of your CSS */
a {
display: inline-block;
height: 32px;
vertical-align: top;
}
/* rest of your CSS... */

Answer 3

Just add float:left to a tag in css
a{
float:left;
}
Your CSS will be
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;
}
a{
float:left;
}