[CSS] ＜ul＞に対してCSSで「margin」「padding」を指定した時の挙動

先日、自分のTumblrのデザインを変更しようとしていて気づいたこと。

<ul>タグによるリストに対して、左側のスペースを調整したかったため、CSSの「margin-left」を指定することにした。しかしこれを指定すると、Internet ExplorerとFirefoxで見た目が変わってしまうのである。

ちなみに、次のような違いが出る。左がIE6、右がFirefox2である。なおスクリーンショットは省略するが、IE7はIE6のときと同様の表示であり、Firefox3・Safari3はFirefox2のときと同様の表示であった。（全てWindows版）

IEとFirefox/Safariは、<ul>や<li>要素のどの部分を基準にマージンやパディングを取るかの扱いが違っているのであろう。しかし、IEとFirefox/Safariでmarginとpaddingの扱いが逆になってしまっているのはデザイン上非常に面倒である。

とりあえずは、スクリーンショットの後ろ3例のように、marginとpaddingを両方指定することでこの問題には対応できる。しかしこの点、HTMLやCSSの仕様上の規定としてはどちらが正しいのだろうか？（あるいは、どちらが正しいか仕様からは判断できないのだろうか？）

HTMLソースはこちら。

<p>default</p>
<ul>
<li>hoge</li>
</ul>

<p>margin-left:0em</p>
<ul style="margin-left:0em">
<li>hoge</li>
</ul>

<p>margin-left:4em</p>
<ul style="margin-left:4em">
<li>hoge</li>
</ul>

<p>padding-left:0em</p>
<ul style="padding-left:0em">
<li>hoge</li>
</ul>

<p>padding-left:4em</p>
<ul style="padding-left:4em">
<li>hoge</li>
</ul>

<p>margin-left:0em;padding-left:4em</p>
<ul style="margin-left:0em;padding-left:4em">
<li>hoge</li>
</ul>

<p>margin-left:2em;padding-left:2em</p>
<ul style="margin-left:2em;padding-left:2em">
<li>hoge</li>
</ul>

<p>margin-left:4em;padding-left:0em</p>
<ul style="margin-left:4em;padding-left:0em">
<li>hoge</li>
</ul>