Home/ Questions/Q 6232815
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T10:11:07+00:00

I am trying to put two images side by side inside a <td> (also

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0