ul要素の構造〜余計な余白は誰？

ul要素とli要素はナビゲーション作成などで使用頻度の高い要素です。
リストは特殊な構造になっています。
ulとliは組み合わせて使用する必要があります。
特にulの直接の子供はliのみとなりますので、ulの入れ子状態で再びulを使用する場合などに注意が必要です。
以下の例は間違いの書き方です。

次が正しい例です。

ナビゲーションを作成したり、リストに写真を入れたりした場合に困るのが余計な余白です。
これはブラウザが持っているCSSの仕業です。
さて、この余白の持ち主は誰でしょうか？また、これはmarginなのかpaddingなのでしょうか？
面倒だからulとliにmargin:0とpadding:0を設定して初期化したりしてましたが、持ち主ははっきりとしておいた方がよさそうです。

答えは次の図のとおりulのpadding-leftです。

また、ブラウザの持つCSSではulの上下マージンも付けられています。