Getting Rid of Extra Height - CSS Reset?

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;
}

`inline-block` gives them that space, why are the `` and the `` `inline-block`? — Goombah, Feb 28 '17 at 07:36
Possible duplicate of [Image inside div has extra space below the image](http://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image) — hdotluna, Feb 28 '17 at 07:55
@LaraBelle - Both of the answers below which deal with line-height fix the problem. But the answer from the post you linked to explains "why". Thanks! — mseifert, Feb 28 '17 at 08:10
@Justinas - The background was just a simple way to make it easy to see the extra space. I don't actually set the background in my real code. Thanks for asking. — mseifert, Feb 28 '17 at 08:12
@PankitKapadia - thanks for the fiddle. Changing `inline-block` to block does fix the problem in this example. However, I prefer to keep it `inline-block` since these classes are used in other situations which require `inline.` — mseifert, Feb 28 '17 at 08:14

twknab · Answer 1 · 2017-02-28T07:49:14.513

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... */

edited Feb 28 '17 at 07:49

answered Feb 28 '17 at 07:43

twknab

1,741
1
21
35

1

Yes this solves the problem. (So does `line-height:0` from another answer). It seems like the real problem is having any `line-height` set at all. I am trying to picture why `vertical-align:top` gets rid of the extra height. – mseifert Feb 28 '17 at 07:59
1

I see from another post: `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.` – mseifert Feb 28 '17 at 08:07
@mseifert I think it's just "the way" that CSS3 is setup: when using `inline` or `inline-block` on a parent element, the children elements will align `vertical-align: baseline;` by default. I just know this from wrestling with a lot of `divs` trying not to use `float` and only `inline-block`, I always have to vertically align top objects that are nested inside of my `inline` elements. It does look like `line-height` works as well, which may be removing any height at all, thus `top`, `baseline`, or `bottom` are irrelevant. – twknab Mar 01 '17 at 07:44
@mseifert If you look here: https://www.w3schools.com/cssref/pr_pos_vertical-align.asp, you'll see, `Default value: baseline` for the `vertical-align` property. I'm glad to hear that `line-height: 0` works also! =) – twknab Mar 01 '17 at 07:46

score 1 · Accepted Answer · answered Feb 28 '17 at 07:42

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>

Yes this solves the problem. Thanks for helping me see that `line-height` is what is adding space to the elements. It makes sense to remove it the way you've described. — mseifert, Feb 28 '17 at 08:02

score 0 · Answer 3 · answered Feb 28 '17 at 07:39

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;
}

Getting Rid of Extra Height - CSS Reset?

3 Answers3