Не работают отступы (margin) в html

Question

Имеется данный html код, содержащий 2 таблицы.

<html>

<head>
  <title>Mercedes</title>
</head>

<body background='images/fon.jpg'>
  <link rel="stylesheet" href="index.css">

  <table border="2">
    <div style="margin-left: 10px;">
      <tr>
        <td colspan="2">
          <zag> Общая информация </zag>
        </td>
      </tr>
      <tr>
        <td> Страна марки </td>
        <td> Германия </td>
      </tr>
      <tr>
        <td> Класс автомобиля </td>
        <td> M </td>
      </tr>
      <tr>
        <td> Количество дверей </td>
        <td> 5 </td>
      </tr>
      <tr>
        <td> Количество мест </td>
        <td> 6 </td>
      </tr>
      <tr>
        <td> Расположение руля </td>
        <td> Левый </td>
      </tr>
      <tr>
        <td colspan="2"> Размеры </td>
      </tr>
      <tr>
        <td> Длина </td>
        <td> 5370 мм </td>
      </tr>
      <tr>
        <td> Ширина </td>
        <td> 1928 мм </td>
      </tr>
      <tr>
        <td> Высота </td>
        <td> 1880 мм </td>
      </tr>
      <tr>
        <td> Колёсная база </td>
        <td> 3430 мм </td>
      </tr>
      <tr>
        <td> Клиренс </td>
        <td> 160 мм </td>
      </tr>
      <tr>
        <td> Ширина передней колеи </td>
        <td> 1666 мм </td>
      </tr>
    </div>
  </table>




  <table border="2">
    <div style="margin-left: 200px;">
      <tr>
        <td colspan="2">
          <zag> Общая информация </zag>
        </td>
      </tr>
      <tr>
        <td> Страна марки </td>
        <td> Германия </td>
      </tr>
      <tr>
        <td> Класс автомобиля </td>
        <td> M </td>
      </tr>
      <tr>
        <td> Количество дверей </td>
        <td> 5 </td>
      </tr>
      <tr>
        <td> Количество мест </td>
        <td> 6 </td>
      </tr>
      <tr>
        <td> Расположение руля </td>
        <td> Левый </td>
      </tr>
      <tr>
        <td colspan="2"> Размеры </td>
      </tr>
      <tr>
        <td> Длина </td>
        <td> 5370 мм </td>
      </tr>
      <tr>
        <td> Ширина </td>
        <td> 1928 мм </td>
      </tr>
      <tr>
        <td> Высота </td>
        <td> 1880 мм </td>
      </tr>
      <tr>
        <td> Колёсная база </td>
        <td> 3430 мм </td>
      </tr>
      <tr>
        <td> Клиренс </td>
        <td> 160 мм </td>
      </tr>
      <tr>
        <td> Ширина передней колеи </td>
        <td> 1666 мм </td>
      </tr>
    </div>
  </table>
</body>


</html>

Пытаюсь сделать отступы от левого края, чтобы таблицы располагались горизонтально друг за другом. Но ничего не выходит. Вот картинка: https://imgur.com/n9o06Fx

Answer 1

Можно просто использовать свойство float без дополнительных элементов-обёрток:

table {
  float: left;
  margin: 0 10px 10px 0;
}

<table border="2">
  <tr>
    <th colspan="2">
      <zag> Общая информация </zag>
    </th>
  </tr>
  <tr>
    <td> Страна марки </td>
    <td> Германия </td>
  </tr>
  <tr>
    <td> Класс автомобиля </td>
    <td> M </td>
  </tr>
  <tr>
    <td> Количество дверей </td>
    <td> 5 </td>
  </tr>
  <tr>
    <td> Количество мест </td>
    <td> 6 </td>
  </tr>
  <tr>
    <td> Расположение руля </td>
    <td> Левый </td>
  </tr>
  <tr>
    <th colspan="2"> Размеры </th>
  </tr>
  <tr>
    <td> Длина </td>
    <td> 5370 мм </td>
  </tr>
  <tr>
    <td> Ширина </td>
    <td> 1928 мм </td>
  </tr>
  <tr>
    <td> Высота </td>
    <td> 1880 мм </td>
  </tr>
  <tr>
    <td> Колёсная база </td>
    <td> 3430 мм </td>
  </tr>
  <tr>
    <td> Клиренс </td>
    <td> 160 мм </td>
  </tr>
  <tr>
    <td> Ширина передней колеи </td>
    <td> 1666 мм </td>
  </tr>
</table>
<table border="2">
  <tr>
    <th colspan="2">
      <zag> Общая информация </zag>
    </th>
  </tr>
  <tr>
    <td> Страна марки </td>
    <td> Германия </td>
  </tr>
  <tr>
    <td> Класс автомобиля </td>
    <td> M </td>
  </tr>
  <tr>
    <td> Количество дверей </td>
    <td> 5 </td>
  </tr>
  <tr>
    <td> Количество мест </td>
    <td> 6 </td>
  </tr>
  <tr>
    <td> Расположение руля </td>
    <td> Правый </td>
  </tr>
  <tr>
    <th colspan="2"> Размеры </th>
  </tr>
  <tr>
    <td> Длина </td>
    <td> 5370 мм </td>
  </tr>
  <tr>
    <td> Ширина </td>
    <td> 1928 мм </td>
  </tr>
  <tr>
    <td> Высота </td>
    <td> 1880 мм </td>
  </tr>
  <tr>
    <td> Колёсная база </td>
    <td> 3430 мм </td>
  </tr>
  <tr>
    <td> Клиренс </td>
    <td> 160 мм </td>
  </tr>
  <tr>
    <td> Ширина передней колеи </td>
    <td> 1666 мм </td>
  </tr>
</table>

Но правильнее будет разместить таблицы в общем flex-контейнере:

.wrapper {
  display: flex;
  gap: 10px;
}

<div class="wrapper">
  <table border="2">
    <tr>
      <th colspan="2">
        <zag> Общая информация </zag>
      </th>
    </tr>
    <tr>
      <td> Страна марки </td>
      <td> Германия </td>
    </tr>
    <tr>
      <td> Класс автомобиля </td>
      <td> M </td>
    </tr>
    <tr>
      <td> Количество дверей </td>
      <td> 5 </td>
    </tr>
    <tr>
      <td> Количество мест </td>
      <td> 6 </td>
    </tr>
    <tr>
      <td> Расположение руля </td>
      <td> Левый </td>
    </tr>
    <tr>
      <th colspan="2"> Размеры </th>
    </tr>
    <tr>
      <td> Длина </td>
      <td> 5370 мм </td>
    </tr>
    <tr>
      <td> Ширина </td>
      <td> 1928 мм </td>
    </tr>
    <tr>
      <td> Высота </td>
      <td> 1880 мм </td>
    </tr>
    <tr>
      <td> Колёсная база </td>
      <td> 3430 мм </td>
    </tr>
    <tr>
      <td> Клиренс </td>
      <td> 160 мм </td>
    </tr>
    <tr>
      <td> Ширина передней колеи </td>
      <td> 1666 мм </td>
    </tr>
  </table>
  <table border="2">
    <tr>
      <th colspan="2">
        <zag> Общая информация </zag>
      </th>
    </tr>
    <tr>
      <td> Страна марки </td>
      <td> Германия </td>
    </tr>
    <tr>
      <td> Класс автомобиля </td>
      <td> M </td>
    </tr>
    <tr>
      <td> Количество дверей </td>
      <td> 5 </td>
    </tr>
    <tr>
      <td> Количество мест </td>
      <td> 6 </td>
    </tr>
    <tr>
      <td> Расположение руля </td>
      <td> Правый </td>
    </tr>
    <tr>
      <th colspan="2"> Размеры </th>
    </tr>
    <tr>
      <td> Длина </td>
      <td> 5370 мм </td>
    </tr>
    <tr>
      <td> Ширина </td>
      <td> 1928 мм </td>
    </tr>
    <tr>
      <td> Высота </td>
      <td> 1880 мм </td>
    </tr>
    <tr>
      <td> Колёсная база </td>
      <td> 3430 мм </td>
    </tr>
    <tr>
      <td> Клиренс </td>
      <td> 160 мм </td>
    </tr>
    <tr>
      <td> Ширина передней колеи </td>
      <td> 1666 мм </td>
    </tr>
  </table>
</div>

БЛОГ НА HUSL

Не работают отступы (margin) в html

Ответы (1 шт):