Eliminate Padding/Margin around Pics in <td> elements_问答_开发者

I am displaying pictures in an HTML table and I have two rows with four pictures in each row.

My problem is that my <td> elements have a padding of about 20% around each picture inside the table and I cannot figure out how to get rid of them.

Consider the following HTML page (open it in a browser - the pics work). You will see the padding, margin, and border around each picture in a <td>element.

What do you think is wrong and how can I get rid of the area around each of the pictures?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">
<!--

body {
    font: 100%/1.4 Helvetica, Verdana, Arial sans-serif;
    height: 100%;
    margin: 0;
    /*background-image: url(../Images/BGshadowEx.jpg);*/
    background-repeat: repeat-x;
    padding: 0;
    color: #000;
    padding-top: 5%;
    font-size: 0.开发者_如何学编程8em;
}

allery.table {margin: 0; padding: 0; border:5px solid red;}
#gallery.tr {margin: 0; padding: 0; background-color:red; border:5px solid red;}
#gallery.td {margin: 0; padding: 0; overflow:hidden; background-color:green; border:5px solid red;}
#gallery.a {margin: 0; padding: 0; overflow:hidden; border:5px solid red; }

-->
</style>
</head>

<body>

<div class="container">

  <div class="content">

     <!-- Announcement div goes here -->

    <div id="gallery" align="center">
        <table align="center" style="background-color: red;">
            <tr style="background-color: blue;"> </tr> <tr style="background-color: blue;"> 
                <td style="background-color: green;">
                    <a href="showPicture.py?picPath=../Images/1.jpg"><img class="meh" src="http://pstutorialsblog.com/tutorials/seamlesspatern/example.gif" class="pic" style="margin: 0; padding: 0; background-color: gray;"/></a>
                </td>
                <td style="background-color: green;">
                    <a href="showPicture.py?picPath=../Images/1.jpg"><img class="meh" src="http://pstutorialsblog.com/tutorials/seamlesspatern/example.gif" class="pic" style="margin: 0; padding: 0; background-color: gray;"/></a>
                </td>
                <td style="background-color: green;">
                    <a href="http://stabledays.typepad.com/.a/6a00e553bd675c88340115721c1a21970b-800wi"><img class="meh" src="http://stabledays.typepad.com/.a/6a00e553bd675c88340115721c1a21970b-800wi" class="pic" style="margin: 0; padding: 0; background-color: gray;"/></a>
                </td>
                <td style="background-color: green;">
                    <a href="http://stabledays.typepad.com/.a/6a00e553bd675c88340115721c1a21970b-800wi"><img class="meh" src="http://stabledays.typepad.com/.a/6a00e553bd675c88340115721c1a21970b-800wi" class="pic" style="margin: 0; padding: 0; background-color: gray;"/></a>
                </td>
            </tr> 
            <tr style="background-color: blue;"> </tr> <tr style="background-color: blue;"> 
                <td style="background-color: green;">
                    <a href="showPicture.py?picPath=../Images/1.jpg"><img class="meh" src="http://pstutorialsblog.com/tutorials/seamlesspatern/example.gif" class="pic" style="margin: 0; padding: 0; background-color: gray;"/></a>
                </td>
                <td style="background-color: green;">
                    <a href="showPicture.py?picPath=../Images/1.jpg"><img class="meh" src="http://pstutorialsblog.com/tutorials/seamlesspatern/example.gif" class="pic" style="margin: 0; padding: 0; background-color: gray;"/></a>
                </td>
                <td style="background-color: green;">
                    <a href="showPicture.py?picPath=../Images/1.jpg"><img class="meh" src="http://pstutorialsblog.com/tutorials/seamlesspatern/example.gif" class="pic" style="margin: 0; padding: 0; background-color: gray;"/></a>
                </td>
                <td style="background-color: green;">
                    <a href="showPicture.py?picPath=../Images/1.jpg"><img class="meh" src="http://pstutorialsblog.com/tutorials/seamlesspatern/example.gif" class="pic" style="margin: 0; padding: 0; background-color: gray;"/></a>
                </td>
            </tr> 

        </table>
    </div>

  <!-- end .content --></div>

</body>
</html>

I have this problem all the time.

It's so annoying.

First off I usually set my doctype to strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Second, I add a browser reset to the top (before any other css): (modified from http://www.vcarrer.com/2010/05/css-mini-reset.html)

html, body, div, form, fieldset, legend, label, img
{
 margin: 0;
 padding: 0; 
}

table
{
 border-collapse: collapse;
 border-spacing: 0;
}

th, td
{
 text-align: left;

}

h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; }

img { border: 0; }

Finally, I add this line, which removes that stupid spacing which appears all the time, the one that isn't padding, margin or anything.

table, tr, td, th, tbody, thead{vertical-align:baseline}

I have added simple css line and the space disappeared within td, i had an image within that and added this line to the image tag.That's it.

display:block;

From what I could tell, the images are different sizes. A row's height must be increased to account for the tallest image. A column's width must be increased to account for the widest image. So the smaller images have space around them.

Typos: allery.table should be #gallery table (no period). Use #gallery table, #gallery td, etc ("all tables within element having id of gallery", "all table data within element having id of gallery", and so on). To be more precise: Children named <table> of parent #gallery.

Syntax: You can't use "align=center" on a <div> like you can a <td>. Also, I noticed in your img tags that you're using "class" twice rather than using multiple class names in a single declaration. Use this method instead class="meh pic". Also, you're mixing (in the code sample) your header CSS with in-line CSS - Not a best practice.

To your question: Placing images inside of a <td> will force it to expand, if it's width/height does not accommodate the image.

Here are a few ways to accomplish what I believe you are trying to do:

Edit your images to a uniform height/width (My recommendation if you have to use tables)
Set the offending parameter of the image so it accommodates (<img width="250"... />).
Use inline CSS on <td> where you know your image will be too big <td style="background-image:url(horses.jpg);">
Scrap the table all together and replace it with rows of <div>s. This would allow you to use "overflow:hidden", for example. (My recommendation if you have this option).

Eliminate Padding/Margin around Pics in <td> elements