Similar Question:
Dealing with Additional Space at the Bottom of an Anchor Tag
Take a look at this example page here..
There seems to be a mysterious gap below the picture of the family, just before the gray-bordered (5px #333) div that holds the image. Despite removing all margins, paddings, etc., the gap persists. :(
Without setting a fixed height on the #index_content div, which I prefer not to do in case the image needs resizing later (which would mean double work for me), how can I eliminate that space while keeping it flexible?
Here is 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;
}