php - 为什么我的某些表格单元格的填充比其他单元格多？

Question

我在这里制作了一个整洁的小照片库 - http://schnell.dreamhosters.com/wallpapers.php

随意环顾四周，如果你喜欢，可以拍一些壁纸，这就是它的用途。

无论如何，我遇到的问题是，如果您仔细观察这些列，第一列和最后一列的填充量与中间的不同。这是此页面的相关 CSS...

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    background: transparent;
}
a:visited   {
    color: blue;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
    text-decoration: none;
}
del {
    text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border: solid 1px black;
    border-collapse: collapse;
    border-spacing: 0;
}

td  {
    border: solid 1px black;
    padding: 5px;
    text-align: center;
}

#gallery    {
    margin: 10px auto;
    width: 960px;
}

#fancybox-title {
    font-size: 1.2em !important;
    font-weight: bold !important;
}

.nav    {
    font-weight: bold;
    font-size: 1.1em;
    text-decoration: none;
}

.padding    {
    padding: 0 0.75em;
}

我没有在标记中添加任何填充，唯一添加填充的 CSS 样式是针对 td 标记的，所以我很困惑为什么中心列的填充比外部列多。我曾尝试取消填充类，认为可能带有链接的单元格正在使单元格增长，从而使带有图像的单元格需要更多填充，但这没有用。

抱歉，如果这看起来有点微不足道，但在涉及视觉效果时，有时我也倾向于强制症和完美主义者。

Answer 1

960 像素/5 个单元格 = 每个单元格 192 像素

• 每张图片的宽度为 176 像素。
• 每个单元格 有 10px 的水平填充。
• 每个单元格都有一个 1px 的边框 (x2)
• 每个单元格 188 像素。

每个表格单元格有 4 像素未说明(总共 20 像素)。

因此，如果您将#gallery 宽度减小到 940px，浏览器将不会有额外的宽度来决定要做什么。