2012.12.09
css

marginとpaddingの違い

div要素などにmargin(マージン)のみを指定した場合は特に問題ないのですが、padding(パディング)を指定すると少しややこしくなります。

widthを例にすると…

Attention!!
ここではtop, bottom, heightについては無視して説明します。marginとpaddingがこういうものだと分かっていただければ嬉しいです。

Boxというdiv要素にmarginを指定するとwidthは下記のようなイメージです。

これにpaddingを追加で指定するとBoxのwidthは下記のようになります。

具体的に数字を入れてみると…

marginのみを指定した場合。

.Box {
width:300px;
margin:10px;
}

Boxの幅を300px、外側に10pxの余白にしたいとして、widthに300px、marginが10pxと記述しました。



そして上記にpaddingを追加した場合。

.Box {
width:280px;
margin:10px;
padding:10px;
}

Boxの幅を300pxにしたいとすると、paddingで指定した分をマイナスする必要があります。
この場合は左右にそれぞれpaddingが10pxとなっていますので、Boxのwidthの実際の見た目は300pxにもかかわらず、ここでは280pxとするのです。



頭では分かっていても、制作中にいまだに混乱するときがあります。
そうなったときはこのように図を書いて改めて整理したりしています。

関連する記事

コメント & トラックバック
  1. 通りすがり

    分かりやすくてためになりました。
    ありがとうございます!!


    • Ri-mode

      お返事遅くなりました。
      お役に立てて嬉しいです。


コメントをどうぞ

技術的なサポート、質問等にはお答えできない場合もございます。
また、現在更新頻度はかなり低めですので、返信できたとしてもかなり遅くなる場合があります。
ご理解くださいませ。


以下のHTMLタグが使えます。
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*


おすすめの本
ネットで調べればなんとかなる!という時代ですが、良い本にめぐり合い、基礎をきっちり固めることで応用がきくテクニックを身に着けることができます。もっと上達したい人におすすめの本をいくつかご紹介します。
TO TOP