もじらで懺悔…width, padding, margin 編

さて、前回「もじらで見る！ #2」で、IE と mozilla での見え方の違いのうち、width と padding 及び border について見てきました。

比較的、単純なお話だったのですが、すでにどひぇ〜という結果であり、だんだん懺悔したい気持になってきましたので、今回から、「もじらで懺悔」というタイトルに変えました。。。。

では今回の懺悔ですが。。。
IEとmozillaでは、あんな風に、paddingの扱いが違ったりするわけですから（ていうか、IEが妙だよね…）、では、要素を入れ子したら一体どんなことになるんでしょう。。。

…やってみます。

●要素を入れ子した時の width と margin と padding

親要素：width 150px / margin 0px / padding 0px
子要素：width 150px / margin 0px / padding 0px

• IE5.5
  
  
• mozilla
  
  
  

双方結果同じ

●子要素に margin をとってみる

親要素：width 150px / margin 0px / padding 0px
子要素：width 150px / margin 12px / padding 0px

• IE5.5
  
  
• mozilla
  
  
  

IE5.5 は、親要素で、width を指定してあっても、子要素の margin 12px によって、親要素が影響を受け、その分（24px）広がる
mozilla は、親要素で width を指定してあれば、子要素の marigin 12px によって、親要素が影響を受けない

●親要素に padding をとってみる

親要素：width 150px / margin 0px / padding 12px
子要素：width 150px / margin 0px / padding 0px

• IE5.5
  
  
• mozilla
  
  
  

親要素の width に padding 12px（24px） が追加され、双方結果は同じ…様に見えるが…？

●親要素の width に padding 12px の分（24px）を加えてみる

親要素：width 174px / margin 0px / padding 12px
子要素：width 150px / margin 0px / padding 0px

• IE5.5
  
  
• mozilla
  
  
  

IE は width 174px で変化なし。変だぞ…？おーい…。
mozilla は width 174px に padding 12px（24px） を追加した幅になった

要するに（また？笑）、width で指定しているにもかかわらず、親要素が子要素の padding や margin に影響を受け、横に広がるところが IEのにすごいところ？ということかな…。で、これで良いんだ〜と思っていると大変な痛手を見るのわけなんですね…。

　# めまいがしてきました… #
　# しかし、さらに懺悔は続くのです… #
　# でもちょっと一休みしよっと #