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

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

每张图片宽176px。
每个细胞有10px的水平填充物。
每个单元格都有1px边框（x2）
每个单元188px。

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

因此，如果您将#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宽。

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

4 个答案: