Устранение прокладки/поля вокруг фото в <td> Элементы

Я показываю картинки в таблице HTML, и у меня есть две строки с четырьмя картинками в каждой строке.Устранение прокладки/поля вокруг фото в <td> Элементы

Моя проблема заключается в том, что мои элементы <td> имеют прописку около 20% вокруг каждого изображения внутри стола, и я не могу понять, как избавиться от них.

Рассмотрите следующую страницу HTML (откройте ее в браузере - работа с фотографиями). Вы увидите прописку, маржу и границу вокруг каждого изображения в элементе <td>.

Как вы думаете, что неправильно, и как я могу избавиться от области вокруг каждой фотографии?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<style type="text/css"> 
<!-- 

body { 
    font: 100%/1.4 Helvetica, Verdana, Arial sans-serif; 
    height: 100%; 
    margin: 0; 
    /*background-image: url(../Images/BGshadowEx.jpg);*/ 
    background-repeat: repeat-x; 
    padding: 0; 
    color: #000; 
    padding-top: 5%; 
    font-size: 0.8em; 
} 

allery.table {margin: 0; padding: 0; border:5px solid red;} 
#gallery.tr {margin: 0; padding: 0; background-color:red; border:5px solid red;} 
#gallery.td {margin: 0; padding: 0; overflow:hidden; background-color:green; border:5px solid red;} 
#gallery.a {margin: 0; padding: 0; overflow:hidden; border:5px solid red; } 

--> 
</style> 
</head> 

<body> 

<div class="container"> 

    <div class="content"> 

    <!-- Announcement div goes here --> 

    <div id="gallery" align="center"> 
     <table align="center" style="background-color: red;"> 
      <tr style="background-color: blue;"> </tr> <tr style="background-color: blue;"> 
       <td style="background-color: green;"> 
        <a href="showPicture.py?picPath=../Images/1.jpg"><img class="meh" src="http://pstutorialsblog.com/tutorials/seamlesspatern/example.gif" class="pic" style="margin: 0; padding: 0; background-color: gray;"/></a> 
       </td> 
       <td style="background-color: green;"> 
        <a href="showPicture.py?picPath=../Images/1.jpg"><img class="meh" src="http://pstutorialsblog.com/tutorials/seamlesspatern/example.gif" class="pic" style="margin: 0; padding: 0; background-color: gray;"/></a> 
       </td> 
       <td style="background-color: green;"> 
        <a href="http://stabledays.typepad.com/.a/6a00e553bd675c88340115721c1a21970b-800wi"><img class="meh" src="http://stabledays.typepad.com/.a/6a00e553bd675c88340115721c1a21970b-800wi" class="pic" style="margin: 0; padding: 0; background-color: gray;"/></a> 
       </td> 
       <td style="background-color: green;"> 
        <a href="http://stabledays.typepad.com/.a/6a00e553bd675c88340115721c1a21970b-800wi"><img class="meh" src="http://stabledays.typepad.com/.a/6a00e553bd675c88340115721c1a21970b-800wi" class="pic" style="margin: 0; padding: 0; background-color: gray;"/></a> 
       </td> 
      </tr> 
      <tr style="background-color: blue;"> </tr> <tr style="background-color: blue;"> 
       <td style="background-color: green;"> 
        <a href="showPicture.py?picPath=../Images/1.jpg"><img class="meh" src="http://pstutorialsblog.com/tutorials/seamlesspatern/example.gif" class="pic" style="margin: 0; padding: 0; background-color: gray;"/></a> 
       </td> 
       <td style="background-color: green;"> 
        <a href="showPicture.py?picPath=../Images/1.jpg"><img class="meh" src="http://pstutorialsblog.com/tutorials/seamlesspatern/example.gif" class="pic" style="margin: 0; padding: 0; background-color: gray;"/></a> 
       </td> 
       <td style="background-color: green;"> 
        <a href="showPicture.py?picPath=../Images/1.jpg"><img class="meh" src="http://pstutorialsblog.com/tutorials/seamlesspatern/example.gif" class="pic" style="margin: 0; padding: 0; background-color: gray;"/></a> 
       </td> 
       <td style="background-color: green;"> 
        <a href="showPicture.py?picPath=../Images/1.jpg"><img class="meh" src="http://pstutorialsblog.com/tutorials/seamlesspatern/example.gif" class="pic" style="margin: 0; padding: 0; background-color: gray;"/></a> 
       </td> 
      </tr> 

     </table> 
    </div> 

    <!-- end .content --></div> 

</body> 
</html>

источник

2011-02-07 Mack

"allery.table" является ошибочным – Jason

У меня есть эта проблема все время.

Это так раздражает.

Во-первых, я обычно установить мой доктайп строгой:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">

Во-вторых, добавить сброса браузера в верхней части (перед любым другим CSS): (редактировался http://www.vcarrer.com/2010/05/css-mini-reset.html)

html, body, div, form, fieldset, legend, label, img 
{ 
margin: 0; 
padding: 0; 
} 

table 
{ 
border-collapse: collapse; 
border-spacing: 0; 
} 

th, td 
{ 
text-align: left; 

} 

h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; } 

img { border: 0; }

Наконец, я добавляю эту строку, которая удаляет этот глупый интервал, который появляется все время, тот, который не является дополнением, границей или чем-либо еще.

table, tr, td, th, tbody, thead{vertical-align:baseline}

источник

2011-02-07 04:20:29 Jason

От всего, что я мог сказать, изображения разных размеров. Высота строки должна быть увеличена для учета самого высокого изображения. Ширина столбца должна быть увеличена для учета самого широкого изображения. Таким образом, у меньших изображений есть пространство вокруг них.

источник

2011-02-07 04:21:57

Опечатки: allery.table должен быть #gallery table (без периода). Используйте #gallery table, #gallery td и т. Д. («Все таблицы внутри элемента с идентификатором галереи», «все данные таблицы внутри элемента с идентификатором галереи» и т. Д.). Точнее: дети с именем <table> родителей #gallery.

Синтаксис: Вы не можете использовать «ALIGN = центр» на <div>, как вы можете <td>. Кроме того, я заметил в ваших тегах img, что вы используете «класс» дважды, вместо того, чтобы использовать несколько имен классов в одном объявлении. Используйте этот метод вместо class = "meh pic". Кроме того, вы смешиваете (в примере кода) свой заголовок CSS с встроенным CSS - не самая лучшая практика.

На ваш вопрос: Размещение изображений внутри <td> заставит его развернуть, если его ширина/высота не соответствуют изображению.

Вот несколько способов сделать то, что я верю, что вы пытаетесь сделать:

редактирования изображений в единой высоте/ширине (Моя рекомендация, если вы должны использовать таблицы)
Установить (<img width="250"... />).
Использование встроенного CSS на <td> где вы знаете, ваш образ будет слишком большой <td style="background-image:url(horses.jpg);">
Scrap стол все вместе и заменить его рядами <div> с. Например, это позволит вам использовать «переполнение: скрытое». (Моя рекомендация, если у вас есть этот вариант).

enter image description here