paddingの指定について

paddingプロパティの指定の仕方や細かい情報についてメモしました。

paddingプロパティは余白を指定することができます。ボーダーと内容の間に余白を設定することができるので、テーブル内のキツキツした感じをなくしたり、背景領域の調節が可能です。

paddingの指定方法

paddingの値はem、px、%（パーセンテージ）などで指定します。

個別で指定することも可能です。

IE6とIE7の表示の違い

IE7やFFでは、横幅（width）と余白（padding）を同時に指定した場合、実際ブラウザで表示される横幅はこの二つを足した値になります。しかし、IE6では横幅と余白を同時に指定した場合、実際ブラウザで表示される横幅はwidthで指定した値になり、その中に余白が作られることになります。

面倒くさいのでIE6は無視したいところなんですが、利用者数がまだまだ結構あるということで、IE6もIE7も同じように表示されるようにしなければなりません。

IE6とIE7を同じように表示させる

方法はいろいろあるのですが、人によって違います。私の場合はpaddingを使用せず、marginで余白分を指定します。でもこれは背景画像などを使用する場合や、枠線のあるボックスなどでは活用できない（pとかにmarginやpaddingを指定しておけば問題ないかも）場合もあるかもしれません。

そのような場合はボックスを二つ使用して、別々にwidthとpaddingを指定するのも良いですし、いろいろと方法があるみたいなので、自分に合った方法でやれば良いかと思います。