[HTML/CSS]margin（マージン）の挙動について

親要素の直下にある要素にmargin-topをつけても期待通りには動かない。
マージンの色が親要素のさらに親要素の背景色になってしまう問題がある。

[解決方法]
・スペースを取りたいときにはpaddingを使う（marginは使わない）
・何か（a など）を挟み込んで配置を変えてやる（親要素直下でなければ期待通りに動く）

<body>
 <div class="sampleDiv">
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="sampleTable">
     <tr>
       <th scope="row">サンプルサンプルサンプルサンプル</th>
       <td>サンプルサンプルサンプルサンプル</td>
     </tr>
   </table>
 </div>
</body>

body {
	background:#FFF;
}
.sampleDiv {
	background:#000;
}
.sampleTable{
	margin-top:100px;
}

<body>

<tr>

<th scope="row">サンプルサンプルサンプルサンプル</th>

<td>サンプルサンプルサンプルサンプル</td>

</tr>

</table>

</div>

</body>

body {

background:#FFF;

}

.sampleDiv {

background:#000;

}

.sampleTable{

margin-top:100px;

}

<body>
 <div class="sampleDiv">
 a
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="sampleTable">
     <tr>
       <th scope="row">サンプルサンプルサンプルサンプル</th>
       <td>サンプルサンプルサンプルサンプル</td>
     </tr>
   </table>
 </div>
</body>

body {
	background:#FFF;
}
.sampleDiv {
	background:#000;
}
.sampleTable{
	margin-top:100px;
}