Отступы в блоке DIV

Отображение элементов display: table;, display: table-cell; и аналогичные им создают по сути эмуляцию таблицы. Соответственно, и поведение таблиц.

Псевдо-таблица:

<div style="display: table;"></div>

Псевдо-ячейка:

<div style="display: table-cell;"></div>

В таком случае, браузер создаст дополнительные анонимные элементы строки и таблицы, которыми Вы не сможете ими управлять.

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

Для построения блочной модели, рекомендую использовать flexbox.

Для примера:

#container { 
display: -webkit-flex;  
display: flex; /*отображает контейнер как блочный элемент*/ 
justify-content: flex-start; 
} 
#container>div.cell{ 
  border: 1px solid red; 
} 
 
#container>div.cell>div{ 
  border: 1px solid blue; 
  margin-top:100px; 
}

<div id="container"> 
  <div class="cell"><div>1</div></div> 
  <div class="cell">2</div> 
</div>