• WEB

padding、marginとは?CSS入門

  • マイケル
    マイケル デザインちーむ
  • このエントリーをはてなブックマークに追加
padding、marginとは?CSS入門

こんちゃ!マイケルやっ!

今回は、「padding」(パッディング)と、「margin」(マージン)について説明してきたいと思います。
CSSにおいて、「padding」と、「margin」は基本中の基本の概念になります。
ちなみに、paddingは日本語で「詰め物」とか「埋め込む」という意味で、marginの方は「余白」とか「差」の意味らしいです。読み方は、パッティング、マージンでOK!

英語 日本語の意味 CSSの装飾効果
padding(パッディング) 詰め物、埋め込む タグ要素の内側余白の指定
margin(マージン) 余白、差 タグ要素の外側余白の指定

今さらすぎて聞けないpadding、marginのこと

私も普段あたり前のように使っています。
正直申しあげますと、『ここは、padding使えばいいや!』、『これだと、marginだぜ!』なんてことは、いちいち考えてません(゚ー゚;
しかし、時々、自分の思いどおりに「margin」が効かなかったりして、『あれれ..』と思うことがあります。

また、初心者の方にCSSを教えるときに『先輩ッ!paddingとmarginの違いって何すか?』って質問されたときに『内側余白と、外側余白やし』みたいなDQNな説明すると、塩対応にもなりかねません。

なので、今回はおさらいもかねて、「padding」と「margin」について詳しく説明させていただきます。

HTMLの基本的な構造のこと

まずは、図解で説明しますので、下の図をご覧ください。

ボックスモデル

図で分かるように、コンテンツのborder(ボーダー)をさかいに、内側の余白(padding)と外側の余白(margin)に分けられます。
このコンテンツの四角い領域をボックスモデルといいます。

ボックスモデルっていう聞きなれない単語出てきました。

HTMLのすべてのタグ要素で囲んだものは四角い領域で形成され、その領域のことをボックスモデルといいます。
これは、実際にタグ要素に背景色やボーダーをつけると分かりやすいです。

spanタグ要素の部分を背景色とボーダーを指定した例:

<p>ここは普通の文章です。<span>ここはspanタグ要素やで</span>ここは普通の文章です。</p>

ここは普通の文章です。ここはspanタグ要素やでここは普通の文章です。

こんな感じで、ちゃんと四角で形成されてます。

padding、marginの指定方法

次にpadding、marginを使う際の書き方です。

個別の場合

padding-top : (数値)px
margin-top : (数値)px
上に対する指定
padding-right : (数値)px
margin-right : (数値)px
右に対する指定
padding-bottom : (数値)px
margin-bottom : (数値)px
下に対する指定
padding-left : (数値)px
margin-left : (数値)px
左に対する指定

あと、個別じゃなくてまとめて書く方法あります。
これのこと「ショートハンド」っていいます。

ショートハンドの場合

padding : (数値)px
margin : (数値)px
【上下右左】の共通の指定
padding : (数値)px (数値)px
margin : (数値)px (数値)px
【上下】【右左】の指定
padding : (数値)px (数値)px (数値)px
margin : (数値)px (数値)px (数値)px
【上】【右左】【下】の指定
padding : (数値)px (数値)px (数値)px (数値)px
margin : (数値)px (数値)px (数値)px (数値)px
【上】【右】【下】【左】の指定

marginの相殺(そうさい)とは

marginは縦方向(垂直方向)の時に限り、重なるmarginを相殺する性質があります。
数値が大きな方が適用されます。相殺は「消されてなくなるよ。」ってことです。

これはどういうことかというと、「margin-bottom:50px」を指定したボックスの下に
「margin-top:30px」を指定すると、50px + 30px = 80pxとなると思いきや、小さい値の方の「margin-top:30px」が消されてなくなり、そんで「margin-bottom:50px」方のみが適用されます。あと覚えてほしいのが、横方向(水平方向)には相殺されません。ご注意をば!

marginの相殺

paddingで、幅や高さの値が変わってしまうorz

paddingは、marginのように相殺はありませんので、すぐに理解できると思いますが一つポイントがあります。widthやheightが決まった値を指定していえるタグ要素に、『内側余白がほしーから、paddingいれよっと』っと思って、paddingを指定すると、要素の幅や高さの大きさ自体が変わってしまいます。

なんのこった?パンナコッタ?っていう方は、以下をご覧ください。

まず、div要素に「width:400px」と、してみました。

サンプル文字サンプル文字サンプル文字サンプル文字サンプル文字サンプル文字サンプル文字

そんで、見やすくしようと「padding:30px」を入れてみます。

サンプル文字サンプル文字サンプル文字サンプル文字サンプル文字サンプル文字サンプル文字

上のと比べると、あきらかに横幅や高さが変わりました。

paddingは、よく「脂肪」という風に例えられます。paddingが増えると、脂肪でぶくぶく太っていくイメージです。

なので、はじめの幅よりも大きくなっちゃうんです。
こういう時は、要素の幅を400pxのままにする為に、paddingで増えた値の分をwidthの値から引けばOKです。

つまり、paddingで左右の幅があわせて60px増えたので、400px – 60px = 340pxになります。そうすると以下ように、最初の幅と同じになります。

サンプル文字サンプル文字サンプル文字サンプル文字サンプル文字サンプル文字サンプル文字

ちなみに、paddingの「脂肪」に対して、marginは、物と物との「距離」として例えられます。

最後に

marginには、他にネガティブマージンっていう理解しにくい効果があるのですが、それはまた次回書きたいと思います。

marginはpaddingって、ただの外側余白、内側余白っていうな感じなんですが、私が初心者の頃は、実際使ってみると『あれ、なんでだろう』と、いろいろとつまずきいた事も多々ありました。
でも、使い続けているとなんとなく分かってきて、こうすればいいのかっていうのが分かってきます。分からないことがあっても、あきらめないで、とりあえず保留にしておいて次に進めば大丈夫です。やっていくうちに、いつの間にか理解してます!

でわ!今回はこれにて失礼いたします!
読んでいただきありがとうございました!

このエントリーをはてなブックマークに追加

マイケルが最近書いた記事

WRITERS POSTS もっと見る

他にもこんな記事が読まれています!

  • WEB
  • マーケティング
  • サーバー・ネットワーク
  • ライフスタイル
  • お知らせ