0

I am trying to put two images side by side inside a <td> (also tried one <td> for each img), but has some white spaces between the images, and do not understand where they come .. I can solve my problem using float, but I'm trying to avoid this. If someone can explain to me why this happens. I took some tips from other questions, but it doesn't work.

Here is my code:

<html>
<head>
    <style "text/css">
        td, tr, img  { padding: 0px; margin: 0px; border: none; }
        table { border-collapse: collapse;} 
    </style>
</head>
<body style="background: black;">
    <center>
        <table cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    <img alt="" title="" src="http://i.min.us/ijCTdY.jpg" />
                </td>
            </tr>
            <tr>
                <td>
                    <img alt="" title="" src="http://i.min.us/jj7Yt6.jpg"/>
                    <img alt="" title="" src="http://i.min.us/ijCo96.jpg"/>
                </td>
            </tr>
        </table>
    </center>
</body>

you can notice that the top image has 800 px height, and the other ones has 400px each one, what I need is some kinda square, without any spaces between the images.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Felipe Silva
  • 3
  • 1
  • 1
  • 3

5 Answers5

3

It's the whitespace in your markup itself. If you remove the line-break and the spaces between the two images, the space will go away.

The whitespace is treated as text, as a single space character.

Joe Enos
  • 39,478
  • 11
  • 80
  • 136
  • i can't even imagine that a line feed was considereted as whitespace. – Felipe Silva Aug 07 '11 at 20:59
  • In HTML, all whitespace (line breaks, spaces, tabs) are considered whitespace when you're working with text. All consecutive whitespace is combined and rendered into a single space character. This is why you need `

    ` tags or forced line breaks when using paragraphs of text - if you just have line breaks between paragraphs, they'll all run together, with just a single space separating them.

     – Joe Enos Aug 07 '11 at 21:04
3

This is easier done without tables: http://jsfiddle.net/feSxA/

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    body {
        background: black;
    }
    .imgHolder { 
        width: 800px;
        margin: auto;
    }
    .imgHolder img {
        float: left;
    }
    </style>
</head>
<body>
    <div class="imgHolder">
        <img alt="" title="" src="http://i.min.us/ijCTdY.jpg" />
        <img alt="" title="" src="http://i.min.us/jj7Yt6.jpg" />
        <img alt="" title="" src="http://i.min.us/ijCo96.jpg" />
    </div>
</body>
</html>
thirtydot
  • 224,678
  • 48
  • 389
  • 349
shanethehat
  • 15,460
  • 11
  • 57
  • 87
3

imgs are inline elements. The horizontal space between the images is coming from the whitespace between the images in the HTML. The same reason that there's a space between the characters here.

So, to fix that, remove the whitespace: http://jsfiddle.net/xMW7N/2/

The vertical space is also because the images are inline elements. The gap is the space reserved for descenders in letters like g and j.

To fix that, set vertical-align: top on img: http://jsfiddle.net/xMW7N/3/

Although in your case (as mentioned in your question), setting float: left works just fine: http://jsfiddle.net/xMW7N/4/

That works because float: left forces display: block, so all of the problems caused by the images being inline are resolved.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • i can't even imagine that a line feed was considereted as whitespace. why? it's confusing to me. – Felipe Silva Aug 07 '11 at 21:00
  • @Felipe Silva: Any "whitespace characters" (spaces, tabs, line feeds) are collapsed into one space. For example: http://jsfiddle.net/7fZpF/. As you can see, the distance between the images is the same despite the varying amounts of whitespace in the HTML. – thirtydot Aug 07 '11 at 21:15
0

try adding a border="0" in your table element

Martin
  • 1,521
  • 3
  • 18
  • 35
0

Add display: block; to your images.

This will remove any gaps caused by the image being inline but you may need to split the cells up to allow them to sit side by side.

You can also remove the whitespace which should get rid of the whitespace.

Marko
  • 71,361
  • 28
  • 124
  • 158