为什么我的一些表格单元比其他单元有更多的填充？

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

我不标记，并且添加填充是TD标签的唯一CSS样式添加任何填充，所以我很困惑，为什么中心列比外部列获得更多的填充。我试图带走填充类，也许与链接的细胞正在使细胞的增长，使图像单元格需要更多的填充，但没有奏效。

抱歉，如果这似乎有点微不足道，但我倾向于是相当OCD，当它的代码涉及到视觉效果，有时还完美主义者。

Answer 1

这不是引起额外空白的表格单元填充。这就是表格的960像素宽度是如何在之间划分的这些列。尝试为每列指定相同的宽度，同时为边框计算几个像素。

Answer 2

快速查看你的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 3

更改表格的宽度从960像素到一个较小的值...我想930px和所有补白看起来是一样的。

你必须计算：图像宽度= 176，5个图像使880，填充有50（总），边界是6 ...所有936一起设置表是936px宽。

Answer 4

960像素/ 5cells = 192px每个细胞

• 每个图像是176px宽。
• 每个单元格 具有10px的水平填充。
• 每个单元都有一个像素边框（×2）
• 188px每个细胞。

对于每个表格单元格（共20px），有4个下落不明。

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