希望获得“display：table-cell;”和padding的指导

Question

我希望第二列中的内容在其上方有10px的空间。但是当我添加＆＃34; padding-top：10px;＆＃34;两列的内容都降低了10px。有人可以提出解决方案吗？

CSS：

#div1 { display: table;}
#div1-1 { display: table-cell; 
   width: 200px; 
   border: 1px solid #aaa; 
}
#div1-2 { display: table-cell; 
   width: 200px; 
   border: 1px solid #aaa; 
   padding-top: 10px;
} 

HTML：

<div id="div1">
<div id="div1-1">Apples</div>
<div id="div1-2">Oranges</div>
</div>

Answer 1

如果添加float：left;到＃div1-1，第一列将保持不变。

Answer 2

我的解决方案是尝试在每个单元格中添加一个框

#myDiv { 
    display: table;
}
#div1 { display: table-row;}
#div1-1{ 
  display: table-cell; 
   width: 200px; 
   border: 1px solid #aaa;
}
#div1-2 { 
   display: table-cell; 
   width: 200px; 
   border: 1px solid #aaa; 
} 
.space{
    height:10px;
    width:100%;
    display:block;
}
.content{
    width:100%;
}

<div id="myDiv">
<div id="div1">
  <div id="div1-1">
      <div class="content">Apples</div>
      <div class="space">&nbsp;</div>
   </div>
  <div id="div1-2">
      <div class="space">&nbsp;</div>
      <div class="content">Oranges</div>
  </div>
</div>
</div>