我在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>
我一直都有这个问题.
这太烦人了.
首先,我通常将我的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}
| 归档时间： |
|
| 查看次数： |
13077 次 |
| 最近记录： |