Подскажите почему при вкладывании таблицы в DIV появляется отступ?

Рейтинг: 0Ответов: 3Опубликовано: 23.04.2015

код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=cp1251" />
  <title>Ширина блока</title>
  <style type="text/css">
   .general {
    background: #FFFFB4 ;
    width: 500px; /* Ширина макета */
    margin: 0 auto; /* Выравниваем по центру */
    position: relative;
   }
   .header {
      background: #BFFFB4 ;
      height: 50px ;
      margin: 0px ;
      padding: 0px;
      border: 0px;
   }
   .footer{
     background: #1B4690 ;
     width: 500px ;
     //float: left ; 
   }
   .col1{
     background: #CFBFB4 ;
     width: 100px ;
     float: left ;
     background-image: url('im.jpg');
     height: 600px; 
   }
   .col2{
     background: #ABB2B4 ;
     width: 300px ;
     float: left ;
     height: 600px; 
   }
   .col3{
     background: #DDB2B4 ;
     width: 100px ;
     float: left ;
     height: 600px; 
   }
   TABLE{
      margin: 0px ;
      padding: 0px ;
      border: 0px ;
   }

   TR{
      margin: 0px ;
      padding: 0px ;
      border: 0px ;
   }

   TD{
      margin: 0px ;
      padding: 0px ;
      border: 0px ;
   }

   img {
      margin: 0px ;
      padding: 0px ;
      border: 0px ;
   }
  </style>
 </head>
 <body>
  <div class="general">
   <div class="header">
   <table padding="0" margin="0" class="tbl">
      <tr>
          <td>
          <img src="chetyrehlistnij_klever.png" height="50"></img>
          </td>
          <td>
            <font>
                вячеслав валерьевич
            </font>
          </td>
      </tr>
   <table>


   </div>
   <div class="col1">dsgfdsfsdfsdfsdf</div>
   <div class="col2">dsgfdsfsdfsdfsdf</div>
   <div class="col3">dsgfdsfsdfsdfsdf</div>
   <div class="footer">dsgfdsfsdfsdfsdf</div>
  </div>
 </body>
</html>
html
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

В коде опечатка: <table> не закрывается. Если её исправить, то отступ пропадает, но это не решение проблемы.

Проблема в двух вещах:

1) Границы между ячейками таблицы добавляют пару пикселей высоты. Их нужно «схлопнуть»:

table {border-collapse: collapse;}

2) Выравнивание картинки. Выравнивание по умолчанию baseline, и из-за этого картинка немного торчит внизу. Его нужно сменить, например, на top:

table img {vertical-align: top;}

Но вообще код плохой: использование табличной вёрстки, фиксированная высота header (когда её можно сделать нефиксированной), использование устаревшего в 2015 году тега font, сочетание столь же устаревшего атрибута height со стилями. Почитайте подробнее про CSS.

▲ 1

Нужно сбросить margin и padding для всех элементов таблицы - table, tbody, tr, th, td, ...

▲ 1

вы таблицу не закрыли < table >< table > а надо < table > < /table >