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).
加载中,请稍侯......
精彩评论