Remove white space from image

Question

please take a look at this fiddle :

I am simply trying to preserve the effect that you see, but i want to remove the white space below the image. I know about display:block, but if i do it, the hover effect does not work. Any ideas on how to fix that ?

Here's a short and complete answer to this question: http://stackoverflow.com/a/31445364/3597276 — Michael Benjamin, Aug 08 '15 at 16:06

jfriend00 · Accepted Answer · 2011-12-16T05:32:40.497

3

Changing the HTML to what I have below (adding the style="font-size:0") fixes the issue in Chrome, Firefox, IE9 and Safari. I've seen this issue before where a browser assumes one row of text as some extra height, even where there is no visible text.

<div class='fancy_image'>
    <div class='shadow' style='border:2px solid; float:left;padding:5px;margin:10px;'>
        <div style="font-size: 0;">    
            <img class='fade' src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width=300 height=200  />
        </div>
    </div>
</div>

enter image description here

You can see it work here: http://jsfiddle.net/jfriend00/8FkmG/. The remaining white space around the image is controlled by the padding in your HTML.

Overall, your HTML/CSS is really screwy here mixing float and positioning and doing positioning on a span. Very odd.

edited Dec 16 '11 at 05:32

answered Dec 16 '11 at 05:26

jfriend00

683,504
96
985
979

both answers work great thank you guys :) It would be nice to know what css part is screwy also. I don't have any span or positioning in my example and if i don't use a float the effect will not work. Is there something the can be done better here ? Just out of curiosity, thanx for the solution anyway :) – Spyros Dec 16 '11 at 05:33
Where did the javascript code come from? Using different CSS for different browsers is not necessary for such a simple layout and is likely a maintenance headache. – jfriend00 Dec 16 '11 at 05:47
ah you are talking about the javascript ? this is a ready made script so ok :P – Spyros Dec 16 '11 at 06:46

score 1 · Answer 2 · edited Dec 16 '11 at 08:04

1

Set line-height:0; in your shadow div.

edited Dec 16 '11 at 08:04

WrightsCS

50,551
22
134
186

answered Dec 16 '11 at 05:27

ToddBFisher

11,370
8
38
54

score 0 · Answer 3 · answered Dec 16 '11 at 05:33

0

just changes the .fade css class

.fade {font-size:0px;
    background: url('http://james.linnegar.com/demos/js/win7/hover.png');
}

answered Dec 16 '11 at 05:33

Murtaza

3,045
2
25
39

Remove white space from image

3 Answers3

Linked

Related