#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    3
    Rep 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
  2. #2
  3. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    246
    Rep 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
    Last edited by coothead; November 11th, 2012 at 10:35 AM.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2012
    Posts
    3
    Rep Power
    0
    Originally Posted by coothead
    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....

    <snip>

    coothead
    I thank you. Now it's time to pay it forward.

    rehowes
  6. #4
  7. ~ bald headed old fart ~
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2005
    Location
    chertsey, a small town s.w. of london, england
    Posts
    246
    Rep Power
    86

    No problem, you're very welcome.


    coothead

IMN logo majestic logo threadwatch logo seochat tools logo