为什么我的某些表格单元格的内边距比其他单元格多？

Question

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

如果您愿意，请随意环顾四周并拍摄一些壁纸，这就是它的用途。

无论如何，我遇到的问题是，如果您仔细观察这些列，就会发现第一个和最后一个列的填充量与中间的填充量不同。这是此页面的相关 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 的水平内边距。
• 每个单元格都有一个 1 像素边框 (x2)
• 188 像素。

每个表格单元格有 4 像素未计算（总共 20 像素）。

因此，如果将 #gallery 宽度减小到 940px，浏览器将不会有额外的宽度来决定如何处理。

Answer 2

造成额外空白的不是表格单元格填充。这就是表格的 960 像素宽度在这些列之间的划分方式。尝试为每列指定相同的宽度，同时为边框分配几个像素。

Answer 3

快速查看你的 html，我可以发现这不是填充的不同。尝试为所有列设置宽度并从表格中删除宽度。

试试这个：

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;
    width:200px;
}

#gallery    {
    margin: 10px auto;
}

#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;
}

Answer 4

将表格的宽度从 960px 更改为更小的值...我尝试了 930px，所有填充看起来都一样。

您必须计算：图像宽度 = 176，5 个图像等于 880，填充为 50（总计），边框为 6...总共 936。将表格设置为 936px 宽。