Mysterious gap under image appearing

Question

Possible Duplicate:
White space at bottom of anchor tag

Check out this sample page here.. http://denise.brixwork.com/

For some odd reason, under that pic of that family, there's a gap before the grey border (5px #333) div that contains the image. I removed all margins, paddings etc. and it still wont' disappear. :(

Short of setting a fixed height on the #index_content div, which i don't want in case the image has to be re-sized later (which means double the work for me), how can I remove that gap while leaving it elastic?

My HTML Code:

<div id="index_content_container">
    <div id="index_content">
        <img src="http://denise.brixwork.com/images/index_photo.jpg" alt="Real Whistler Living - Real Estate for the Next Generation" />
    </div>
    <div class="clear"></div>
</div>

The CSS:

/* INDEX PAGE SPECIAL CSS */
#index_content_container {
    position: relative;
    width: 970px;
    border: 5px solid #e1bb14;
    left: -20px;
    display: block;
    float: left;
    padding: 0px;
    margin: 0px;
}

#index_content {
    position: relative;
    width: 960px;
    border: 5px solid #333;
    float: left;
    display: block;
    padding: 0px;
    margin: 0px;
}

#index_content img {
    padding: 0px;
    border: none;
    margin: 0px;
    clear: none;
}

is a clearing mechanism, veyr common to avoid the containing div (such as one with borders) to collapse to 0 height while content inside is visible. Also serves as a clean & compatible
equivalent for
s without having to do extra work. — jeffkee, Jun 15 '12 at 20:24

score 5 · Accepted Answer · edited Jun 15 '12 at 20:21

5

Try this:

#index_content img{
padding: 0px;
border: none !important;
margin: 0px;
clear: none;
display: block;
}

edited Jun 15 '12 at 20:21

j08691

204,283
31
260
272

answered Jun 15 '12 at 20:20

Adam Flatau

168
10

2

Bingo. Worked like a charm. So basically i was just missing "display:block;"? The !important; part didn't make a difference omitted or included... – jeffkee Jun 15 '12 at 20:23
yes correct, the display:block was what you needed. I just do the !important of use of habit – Adam Flatau Jun 15 '12 at 20:26
2

Using `!important` is an awful habit. – Quentin Jun 15 '12 at 20:32

score 4 · Answer 2 · edited Jun 15 '12 at 22:07

4

You only need display: block in your img tag, nothing else =)

edited Jun 15 '12 at 22:07

Asif

4,980
8
38
53

answered Jun 15 '12 at 20:23

leopic

2,958
2
27
42

Could you explain us why ? I am coding for some time now and I never had this problem before... Dont understand. – Miguel Bocquier Nov 18 '13 at 22:42

Mysterious gap under image appearing

2 Answers2

Linked