November 10th, 2012, 11:02 PM
How do I eliminate this gap?
I have been trying to eliminate some gaps in a page on and off for several days now. Rather than present a huge page, I have stripped my page down to just about the bare minimum code that still shows the gap. I also used background colors with lots of contrast so I can tell what element is creating that gap.
Here is the code:
Removing the "<div>" markup eliminates the gap in the stripped-down code but I will have to use containers in the real page. I also explicitly set the margins to 0, so I don't know where the gap is coming from.
<body><div><img src="" alt="placeholder" width="100" height="100" style="background-color: #FFFF00"></div></body></html>
Thank you for your consideration.
Last edited by rehowes; November 10th, 2012 at 11:05 PM.
Reason: add tag
November 11th, 2012, 11:30 AM
Hi there rehowes,
and a warm welcome to these forums.
The easiest way to explain this to you, is, I hope, by letting you experiment with this code....
By each in turn I mean use "display:block" or "float:left with overflow:hidden in the div" or "vertical-align:bottom".
font-size:80px; /* the gap at the bottom of the img element varies according to the font-size */
/*overflow:hidden;*/ /* use this when the img element has foat:left */
/* the gap at the bottom occurs because it is an inline element,
un-comment each in turn to see the result
/*float:left;*/ /* the containing div requires overflow:hidden if this option is used */
<img src="http://www.coothead.co.uk/images/anim.gif" alt="">
Comments on this post
Last edited by coothead; November 11th, 2012 at 11:35 AM.
November 11th, 2012, 11:46 AM
I thank you. Now it's time to pay it forward.
Originally Posted by coothead
November 11th, 2012, 11:55 AM
No problem, you're very welcome.