margin-bottom／margin-topの検証
よく分らないのがmargin-bottom／margin-top。思ったとおりに反映してくれない。そこで検証してみた。
検証
marginなし marginなし |
bottom:0 top:0 |
bottom:0mm top:0mm |
bottom:0 top:5mm |
bottom:0 top:10mm |
bottom:0 top:15mm |
bottom:5mm top:0mm |
bottom:5mm top:5mm |
bottom:5mm top:10mm |
bottom:5mm top:15mm |
bottom:10mm top:0mm |
bottom:10mm top:5mm |
bottom:10mm top:10mm |
bottom:10mm top:15mm |
bottom:5mm top:-4mm |
よくみると、margin-bottom／margin-topの合計でも差でもなく、大きい方の数値が反映している。一番最後の例は、margin-topにマイナス値＜-4mm＞を指定。これは合計「5mm＋(-4mm)=1mm」が反映している？？
(IE8、FireFox3.6.13、GooleChromeバージョン22は同じ結果だった）
Sample Source......................................................................>>>
<style type="text/css">
p.bottom {background-color:tan;border:1px solid navy}
p.top {background-color:#996600;border:1px solid navy}
</style>
</head>
<body>
<table border="1" bordercolor="navy">
<tr>
<td valign="top"><p class="bottom">marginなし</p><p class="top">marginなし</p></td>
<td valign="top"><p class="bottom" style="margin-bottom:0">bottom:0</p>
<p class="top" style="margin-top:0">top:0</p></td>
<td valign="top"><p class="bottom" style="margin-bottom:0mm">bottom:0mm</p>
<p class="top" style="margin-top:0mm">top:0mm</p></td>
<td valign="top"><p class="bottom" style="margin-bottom:0">bottom:0</p>
<p class="top" style="margin-top:5mm">top:5mm</p></td>
<td valign="top"><p class="bottom" style="margin-bottom:0">bottom:0</p>
<p class="top" style="margin-top:10mm">top:10mm</p></td>
</tr>
<tr>
<td valign="top"><p class="bottom" style="margin-bottom:0">bottom:0</p>
<p class="top" style="margin-top:15mm">top:15mm</p></td>
<td valign="top"><p class="bottom" style="margin-bottom:5mm">bottom:5mm</p>
<p class="top" style="margin-top:0mm">top:0mm</p></td>
<td valign="top"><p class="bottom" style="margin-bottom:5mm">bottom:5mm</p>
<p class="top" style="margin-top:5mm">top:5mm</p></td>
<td valign="top"><p class="bottom" style="margin-bottom:5mm">bottom:5mm</p>
<p class="top" style="margin-top:10mm">top:10mm</p></td>
<td valign="top"><p class="bottom" style="margin-bottom:5mm">bottom:5mm</p>
<p class="top" style="margin-top:15mm">top:15mm</p></td>
</tr>
<tr>
<td valign="top"><p class="bottom" style="margin-bottom:10mm">bottom:10mm</p>
<p class="top" style="margin-top:0mm">top:0mm</p></td>
<td valign="top"><p class="bottom" style="margin-bottom:10mm">bottom:10mm</p>
<p class="top" style="margin-top:5mm">top:5mm</p></td>
<td valign="top"><p class="bottom" style="margin-bottom:10mm">bottom:10mm</p>
<p class="top" style="margin-top:10mm">top:10mm</p></td>
<td valign="top"><p class="bottom" style="margin-bottom:10mm">bottom:10mm</p>
<p class="top" style="margin-top:15mm">top:15mm</p></td>
<td valign="top"><p class="bottom" style="margin-bottom:5mm">bottom:5mm</p>
<p class="top" style="margin-top:-4mm">top:-4mm</p></td>
</tr>
</table>