Почему некоторые из моих ячеек таблицы имеют больше заполнения, чем другие?

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.
• Каждая клетка имеет 10 пикселей по горизонтали.
• Каждая ячейка имеет границу в 1 пиксель (x2)
• 188 пикселей на ячейку.

На ячейку таблицы не добавлено 4 пикселя (всего 20 пикселей).

Так что, если вы уменьшите ширину #gallery до 940px, браузер не будет иметь дополнительной ширины, чтобы решить, что делать.

Answer 2

Это не заполнение ячейки таблицы, которое вызывает дополнительный пробел.Вот как ширина вашей таблицы 960 пикселей делится на между этими столбцами.Попробуйте указать одинаковую ширину для каждого столбца с учетом нескольких пикселей для границы.

Answer 3

Измените ширину таблицы с 960px на меньшее значение ... Я пробовал 930px, и все отступы выглядят одинаково.

Вы должны рассчитать: ширина изображения = 176, 5 изображений - 880, отступы - 50 (всего), границы - 6 ... все вместе 936. Установите ширину таблицы 936 пикселей.

Answer 4

Быстро просматривая ваш 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;
}