Whitespace underneath image

Question

I'm converting my site from a fixed to responsive layout and using the getskeleton framework. http://jsfiddle.net/L2q750xw/1/

 <div class="one-third column">

    <h4>Basic Page</h4>
     <div class="home-box-wrap"><img class="u-max-full-width" src="http://www.aroundtheworldin80jobs.com/wp-content/uploads/2013/09/2013-berlin.jpg"></div>

    <p>This index.html page is a placeholder with the CSS, font and favicon. It's just waiting for you to add some content! If you need some help hit up the <a href="http://www.getskeleton.com">Skeleton    documentation</a>.</p>
  </div>
</div>

}.home-box-wrap{
width:100%;
height:0%;
 border:2px solid #ff00ff;
 border-radius: 5px;
 padding:0px;
 }
.u-max-full-width {
 max-width: 100%;
 box-sizing: border-box; }

All works as expected except for the whitespace underneath images, I can't see a reason for this and have tried removing the padding and adjusting the box height and it should all be normalized.

Thanks

score 3 · Answer 1 · edited May 23 '17 at 12:12

You basically have two options.

Either change the vertical-align property of the img element to something other than the default value of baseline:

Updated Example

.u-max-full-width {
    vertical-align: top;
    max-width: 100%;
    box-sizing: border-box;
}

In some cases, you could also change the display of the img element from the default value inline, to block.

Updated Example

.u-max-full-width {
    display: block;
    max-width: 100%;
    box-sizing: border-box;
}

As for why this is happening:

There is reserved whitespace for inline elements for letters such as f, j, p and q that extend beyond the height of other letters. By changing the vertical-align property of the element to something other than the default value of baseline, the whitespace is removed. By changing the display of the element to block, the vertical-align property no longer has an effect on the element as it is no longer inline.

@tomharrison Mark the answer correct if it answered your question. Click the tick under the votes. — Austin Collins, Feb 21 '15 at 16:53

score 1 · Answer 2 · answered Feb 21 '15 at 16:46

1

@JoshCrozier has got a nice way out! But I would like to add a cheeky trick that will help you out. Just add a negative margin-bottom to all your img elements.

img{
    margin-bottom:-7px;
}

Working fiddle:http://jsfiddle.net/L2q750xw/3/

answered Feb 21 '15 at 16:46

m0bi5

8,900
7
33
44

This isn't always guaranteed to work since the amout of whitespace will vary depending on the size of the font. [See this example](http://jsfiddle.net/ymkojrq6/) This is essentially a hack. Why `-7px`? – Josh Crozier Feb 21 '15 at 16:51
@JoshCrozier yup i am aware of that , and -7px by trial and error method ;) – m0bi5 Feb 21 '15 at 16:53

Deepak Thomas · Answer 3 · 2015-02-21T16:56:05.610

0

The image is being displayed inline and hence your padding:0 rule is not getting applied. Make it a block/inline-block level element

.home-box-wrap img  { display:block }

edited Feb 21 '15 at 16:56

answered Feb 21 '15 at 16:49

Deepak Thomas

3,355
4
37
39

Whitespace underneath image

3 Answers3