Question

我在HTML表格中显示图片，我有两行，每行有四张图片。

我的问题是我的<td>元素在表格内的每张图片周围都有大约20％的填充，我无法弄清楚如何摆脱它们。

考虑以下HTML页面（在浏览器中打开它 - 图片工作）。您将在<td>元素中看到每张图片周围的填充，边距和边框。

你认为哪些是错的？如何摆脱每张照片周围的区域？

<!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>

Answer 1

我一直有这个问题。

太烦人了。

首先，我通常将我的doctype设置为严格：

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

其次，我将浏览器重置添加到顶部（在任何其他css之前）:(从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; }

最后，我添加了这一行，它删除了一直出现的愚蠢间距，不是填充，边距或任何东西。

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

Answer 2

据我所知，图像尺寸不同。必须增加行的高度以考虑最高的图像。必须增加列的宽度以考虑最宽的图像。所以较小的图像周围有空间。

Answer 3

错别字： allery.table应该是#gallery表（没有句号）。使用#gallery table，#gallery td等（“具有图库ID的元素内的所有表格”，“具有图库ID的元素内的所有表格数据”，等等）。更确切地说：父亲<table>的{{1}}名为<{1}}。

语法：您不能像#gallery那样在<div>上使用“align = center”。<td>。另外，我在你的img标签中注意到你使用“class”两次，而不是在一个声明中使用多个类名。使用此方法而不是class =“meh pic”。此外，您正在混合（在代码示例中）您的标题CSS与内联CSS - 不是最佳做法。

关于您的问题：如果图片的宽度/高度不适合图片，则将图片放在<td>内会强制它展开。

以下几种方法可以完成我认为你想要做的事情：

将图像编辑为统一的高度/宽度（如果必须使用表格，我的建议）
设置图像的违规参数，使其适应（<img width="250"... />）。
在<td>上使用内联CSS，您知道自己的图片太大<td style="background-image:url(horses.jpg);">
将所有表格整理并将其替换为<div>行。例如，这将允许您使用“overflow：hidden”。（如果你有这个选择我的建议。）

enter image description here

Answer 4

我添加了简单的css行，并且空间在td内消失了，我在其中有一个图像并将此行添加到图像标记中。那就是它。

display:block;

消除元素中Pics周围的填充/边距

4 个答案: