Gap on image bottom?

HTML & CSS
1

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/


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

I remember being really frustrated with this one. :slight_smile: 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:


img {
  border: 0 none;
  margin: 0;
  padding: 0;
  [COLOR="#FF0000"]vertical-align: bottom;[/COLOR]
}
3

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.