SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jan 2009
    Posts
    353
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Gap on image bottom ?

    Gap on image bottom ?

    I know it's another simple one but I can't work it out

    I have a list of images here and they all seem to have a gap at the
    bottom. What's causing the gap?

    http://www.ttmt.org.uk/css/


    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
    	<title>untitled</title>
    	<style type="text/css" media="screen">
    	 *{
    	   margin:0;
    	   padding:0;
    	 }
    	 body{
    	   background:#eee;
    	 }
    	 li{
    	   background:white;
    	   list-style:none;
    	   border: 1px solid red;
    	   margin:0 0 10px 0;
    	   padding:0;
    	 }
    	 #wrap{
    	   margin:30px;
    	   width:300px;
    	 }
    	 img{
    	   border:0;
    	   padding:0;
    	   margin:0;
    	 }
    	 a{
    	   border:0;
    	   padding:0;
    	   margin:0;
    	 }
    	</style>
    </head>
    
    <body>
    
      <div id="wrap">
        <ul>
          <li><a href=""><img src="01.jpg" alt="" /></a></li>
          <li><a href=""><img src="02.jpg" alt="" /></a></li>
          <li><a href=""><img src="03.jpg" alt="" /></a></li>
          <li><a href=""><img src="04.jpg" alt="" /></a></li>
        </ul>
      </div><!-- #wrap -->
    
    </body>
    </html>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    I remember being really frustrated with this one. It's because, by default, images align themselves with the baseline of any text that might sit beside them, leaving room below for descenders like on the "p".

    The easy way to fix it is to add the line in red to your style sheet:

    Code:
    img {
      border: 0 none;
      margin: 0;
      padding: 0;
      vertical-align: bottom;
    }

  3. #3
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    As Ralph suggested vertical-align:bottom fixes it -- but the core cause is that images are inline-level elements with a inline-block behavior by default. As such setting the img to be floated (as your massive gap on one side suggests there'll be other content next to them?) or setting them to display:block can also remove said gaps... and vertical-align doesn't always fix it in a reliable fashion.

    Which is part of why I don't try to code layout until I have all the content in place -- so you don't add behaviors to an element without seeing how it interacts with everything else you're putting in there -- also the problem with snippets, we can't see the big picture.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •