消除图片中的填充/边距元素

我在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>

来源

2011-02-07 Mack

“allery.table”是mis-spelled btw – Jason 2011-02-07 04:22:08

我一直有这个问题。

这很烦人。

首先我通常把我的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; }

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

来源

2011-02-07 04:20:29 Jason

从我可以告诉，图像是不同的大小。为了考虑最高的图像，必须增加一行的高度。列宽必须增加以考虑最宽的图像。所以较小的图像周围有空间。

来源

2011-02-07 04:21:57

错别字： allery.table应该是#gallery表（无期限）。使用#gallery table,#gallery td等（“具有图库ID的元素内的所有表格”，“具有图库ID的元素内的所有表格数据”等等）。更确切地说：父母#gallery的孩子名为<table>。

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

对于你的问题：如果图像的宽度/高度不适应图像，将图像放置在<td>的内部会强制图像展开。

下面是完成我相信你正在尝试做的几个方法：

编辑您的图片，以统一的高度/宽度（我的建议，如果你要使用表）
设置图像的违规参数，以便它可以容纳（<img width="250"... />）。
使用上<td>，你知道你的形象会太大<td style="background-image:url(horses.jpg);">
废表一起，与<div> s行替换它内联CSS。例如，这将允许您使用“overflow：hidden”。（我的建议，如果你有这个选项）。

enter image description here

来源

2011-02-07 11:37:31 Dawson

我加入了简单的CSS行和TD内的空间消失，我有内的图像，并将此行tag.That就是它的形象。

display:block;

来源

2015-09-30 20:21:11

消除图片中的填充/边距​​元素

回答

相关问题

消除图片中的填充/边距元素