こんちゃ！マイケルやっ！
今回は、「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」方のみが適用されます。あと覚えてほしいのが、横方向（水平方向）には相殺されません。ご注意をば！
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って、ただの外側余白、内側余白っていうな感じなんですが、私が初心者の頃は、実際使ってみると『あれ、なんでだろう』と、いろいろとつまずきいた事も多々ありました。
でも、使い続けているとなんとなく分かってきて、こうすればいいのかっていうのが分かってきます。分からないことがあっても、あきらめないで、とりあえず保留にしておいて次に進めば大丈夫です。やっていくうちに、いつの間にか理解してます！
でわ！今回はこれにて失礼いたします！
読んでいただきありがとうございました！
