How do I eliminate this gap?

Dev Shed Forums Sponsor:

November 10th, 2012, 10:02 PM

rehowes

Registered User

Join Date: Nov 2012

Posts: 3

Time spent in forums: 1 h 24 m 58 sec
Reputation Power: 0

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:

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
body {
	background-color: #FF0000;
	margin: 0;
	padding: 0;
}
div {
	background-color: #0000FF;
	margin: 0;
	padding: 0;
}
img {
	background-color: #3F0;
	margin: 0px;
	padding: 0px;
}
</style>
</head>
<body><div><img src="" alt="placeholder" width="100" height="100" style="background-color: #FFFF00"></div></body></html>

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.

Thank you for your consideration.

Last edited by rehowes : November 10th, 2012 at 10:05 PM. Reason: add tag

November 11th, 2012, 10:30 AM

coothead

~ bald headed old fart ~

Join Date: May 2005

Location: chertsey, a small town s.w. of london, england

Posts: 192

Time spent in forums: 1 Week 17 h 40 m 52 sec
Reputation Power: 86

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....

Code:

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>Untitled Document</title>

<style type="text/css">
body {
    background-color:#f00;
    margin:0;

    font-size:80px;  /* the gap at the bottom of the img element varies according to the font-size */
 } 
div {
    background-color:#00f;

    /*overflow:hidden;*/ /* use this when the img element has foat:left */
 }
img {

/*   the gap at the bottom occurs because it is an inline element, 

     un-comment each in turn to see the result 

*/ 

    /*display:block;*/

    /*float:left;*/ /* the containing div requires overflow:hidden if this option is used */

    /*vertical-align:bottom;*/    	
 }
</style>

</head>
<body>

<div>
<img src="http://www.coothead.co.uk/images/anim.gif" alt="">
</div>

</body>
</html>

By each in turn I mean use "display:block" or "float:left with overflow:hidden in the div" or "vertical-align:bottom".

coothead

Comments on this post

Kravvitz agrees!

__________________