太郎君がコーディングをしています。
太郎「あれ？なんでだろう・・・。」
博士「どうしたんじゃ、太郎君？」
太郎「あ、博士。実は、余白を大きくしようとしてmargin-bottomを大きくしたんだけど、変わらないんですよ。」
博士「ふむ、どれどれ。・・・おや、これは」
太郎「博士、どうしたんですか？」
博士「太郎君、これをchromeのディベロッパーツールで見てみるのじゃ。」→こちら
太郎「はい。あれ、margin-bottomがかかってない。」
博士「そう、上下のmarginは、重なるときはどちらか大きいほうを取り、小さいほうは無視されるのじゃ。」
太郎「そうだったんですね。博士、余白についてもっと詳しく聞かせてください。」
博士「よかろう。ではいろいろ見ていこう。」

 

———————————————————————————————————-

 

○マージンとパディングの違い

 

まずは、marginとpaddingの違いについて確認しておきましょう。
ざっくり言えばマージンが外側、パディングが内側なのですが、では何が変わるのでしょうか。
余白をマージンでとった場合（左）と、パディングで取った場合（右）で見比べてみましょう。
DEMO①

 

マージンで取った場合は、背景色が文字の後ろにしかなく、ボーダーは文字の周りに着いていますが、パディングの場合は背景色、ボーダーともに広がっています。つまり、パディングなら背景色、背景画像の表示できる範囲が広がるのです。背景画像を入れるときは画像の大きさ分のボックスの大きさを作ってあげないといけないので、ここでパディングが活躍するわけですね。

 

 

○marginの特徴
次にmarginの特徴についてです。上下のmarginについては、さっきも見た通りですが、それ以外に子要素のマージンも注意が必要です。
DEMO②

 

デモをディベロッパーツールで見てもらうとわかるのですが、親要素にmargin-top:30px、子要素にmargin-top:60pxをかけているのですが、上の要素との余白は60pxしか空いていません。これは親要素と子要素の上マージンでは、子要素のマージンは飛び出してしまって、大きいほうが採用されてしまうのです。下マージンも同様のことが起こります。

 

 

○box-sizing:border-box
余白に関係するお話として、border-boxのお話をしておきましょう。
border-boxとはbox-sizingというCSSプロパティの値の一つです。これを設定するとwidthにborderとpaddingを含んでくれます。

 

どういうことか。もう少し詳しく説明しますね。
width:100px; border:1px; padding:30px;の要素が3つ並んでいたとしたら、横幅の合計は(100＋1＋30)*3で393pxになります。しかし、この要素にbox-sizing:border-boxをかけると、3つの横幅の合計は300pxになるのです。
DEMO③

 

レスポンシブ対応するときにwidthを％で設定するときなどに便利ですので、ぜひ使ってほしいと思います。

 

———————————————————————————————————-

 

博士「ということじゃ。わかったかな？」
太郎「はい、博士。」
博士「今日、話したのはほんの一部じゃ。自分でいろいろ調べてみることが大切じゃな。」

 

以上です。。抜けてることも多々あるかと思いますので、ご意見・ご感想お待ちしております。Facebookページ