Why do some of my table cells have more padding than others?

Question

So I made a neat little photo gallery here at - http://schnell.dreamhosters.com/wallpapers.php

Feel free to look around and take some of the wallpapers if you like, that's what it's there for.

Anyways, the problem I'm having is that if you look very closely at the columns, the first and last ones have different amounts of padding from the ones in the middle. Here's the relevant CSS for this page...

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

I don't add any padding in the markup and the only CSS styling that adds padding is for td tags, so I'm confused as to why the center columns are getting more padding than the outer ones. I've tried taking away the padding class thinking maybe the cells with the links are making the cells grow such that the cells with images need more padding, but that didn't work.

Sorry if this seems a bit insignificant, but I tend to be rather OCD and perfectionist when it comes to visuals and sometimes with code also.

Answer 1

Quickly looking at your html, I can see that it's not the padding that is different. Try putting a width to all the column and remove the width from the table.

Try this:

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 2

Change the width of the table from 960px to a smaller value... I tried 930px and all paddings look the same.

You have to calculate: image width = 176, 5 images make 880, paddings are 50 (total), borders are 6... all together 936. Set the table to be 936px wide.

Answer 3

It's not the table cell padding that's causing the extra white space. It's how the 960 pixels width of your table is divided up between those columns. Try specifying the same width for each column, while accounting a few pixels for the border.

Answer 4

960px / 5cells = 192px per cell

• Each image is 176px wide.
• Each cell has 10px of horizaontal padding.
• Each cell has a 1px border (x2)
• 188px per cell.

There is 4px unaccounted for per table cell (20px total).

So if you reduce the #gallery width to 940px, there will be no extra width for the browser to decide what to do with.