Eliminate Padding/Margin around Pics in <td> elements
Solution 1
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}
Solution 2
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;
Solution 3
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.
Solution 4
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).
Admin
Updated on June 04, 2022Comments
-
Admin almost 2 years
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>