この記事では、「margin」と「padding」の違いを分かりやすく説明していきます。
「margin」とは?
「margin」とはボックスモデルの外側に空白を設けるためのコマンドです。
htmlのボックスモデルではテキストなどのコンテンツを囲うように四角い枠を作れますが、その枠の上下左右にmarginで指定した幅の空白を空けます。
marginを使うことで前後の文章や画像との間に隙間を作りボックスを強調しやすくなったりボックスの大きさを調整できますが、ブラウザーのウインドウサイズに関わらず指定した幅の空白が空くので、幅が広すぎるとレイアウトが崩れて改行が多くなりやすいなどの問題に繋がりやすいでしょう。
「padding」とは?
「padding」とはボックスモデルの内側に空白を設けるためのコマンドです。
ボックスモデルの内側に文章や画像などのコンテンツを表示すると、デフォルトの状態では枠とコンテンツの間に隙間がほとんどありません。
そうなるとユーザーに窮屈な印象を与えてしまい読みにくくなるので、paddingで枠とコンテンツの間に空白を設けることで窮屈さを解消できます。
paddingも枠の内側の上下左右に空白を設けるので幅が広すぎると改行が増える可能性はありますが、ボックスのサイズ自体は変わらないのでページ全体のレイアウトは崩れにくいでしょう。
「margin」と「padding」の違い
「margin」と「padding」の違いを、分かりやすく解説します。
ボックスモデルの外側に空白を空けるのが「margin」で、枠の内側に空白を空けるのが「padding」です。
「margin」ではボックス自体の大きさも変わりますが、「padding」ではボックスの大きさは変わりません。
まとめ
「margin」はボックスの枠外に空白を作り、「padding」は枠の内側に空白を作るものと区別すればしっかりと使い分けできるでしょう。
「margin」はボックスのサイズ調整や前後のコンテンツとの隙間によるボックスの強調、「padding」はボックス内のコンテンツの視認性を上げる効果があると、何のために使うかも違います。
