要素間のmarginについて

次の表は、上の<p>タグには margin-bottomを、下の<p>タグにはmargin-topを設定したものです。数字は設定したcm数値。

bm-0

tp-0

bm-0

tp-1

bm-0

tp-2

bm-0

tp-3

bm-1

tp-0

bm-1

tp-1

bm-1

tp-2

bm-1

tp-3

bm-2

tp-0

bm-2

tp-1

bm-2

tp-2

bm-2

tp-3

(上表から判かること)上下の要素間のmarginは
  ・margin-bottomとmargin-topの合計ではない。
  ・margin-bottomとmargin-topの大きいほうの数値が適用

htmlsouse.gif (2461 バイト)

<table border="1" cellpadding="5" cellspacing="1">
<tr>
  <td valign="top">bm-0<p>tp-0</td>
  <td valign="top">bm-0<p style="margin-top:1cm">tp-1</td>
  <td valign="top">bm-0<p style="margin-top:2cm">tp-2</td>
  <td valign="top">bm-0<p style="margin-top:3cm">tp-3</td>
  <td valign="top"><p style="margin-bottom:1cm">bm-1</p>
        <p>tp-0</td>
  <td valign="top"><p style="margin-bottom:1cm">bm-1</p>
        <p style="margin-top:1cm">tp-1</td>
  <td valign="top"><p style="margin-bottom:1cm">bm-1</p>
        <p style="margin-top:2cm">tp-2</td>
  <td valign="top"><p style="margin-bottom:1cm">bm-1</p>
        <p style="margin-top:3cm">tp-3</td>
  <td valign="top"><p style="margin-bottom:2cm">bm-2</p>
        <p>tp-0</td>
  <td valign="top"><p style="margin-bottom:2cm">bm-2</p>
        <p style="margin-top:1cm">tp-1</td>
  <td valign="top"><p style="margin-bottom:2cm">bm-2</p>
        <p style="margin-top:2cm">tp-2</td>
  <td valign="top"><p style="margin-bottom:2cm">bm-2</p>
        <p style="margin-top:3cm">tp-3</td>
  </tr>
</table>

END(99/5/19)