プログラミング

paddingとmarginの違い、使い分けを【超】わかりやすく初心者目線で解説します

[temp id=2]

わたしがTechAcademy(テックアカデミー)で勉強中、1番最初につまずいたのがpadding(パディング)とmargin(マージン)の違いでした

使い分けまで何回もメンターさんに聞き倒したわたしが、初心者目線で、違いと使い分けを解説しようと思います!

padding(パディング)とmargin(マージン)とは??

それぞれの意味

  • padding:内側の余白
  • margin:外側の余白

これらはよく言われていますよね

じゃあどこの内側とどこの外側なんだ!という話になりますが、そこにはボックスモデルという考え方が関わっています

こちらも【超】簡単に説明しますね

ボックスモデルの考え方

まず、HTMLで文章を書こうと思ったら、pタグを使って書いていきますよね

黄色で示している、中身のいわゆるコンテンツになります

その文章のすぐ周りが赤色のpadding、

そしてその周りが紺色のborder、さらにその周りが水色のmarginです

この4つの四角形の領域をボックスモデルといい、これらを使ってページのデザインを調整していきます

ここでは文章とかの周りにプラスで3段階あって、合わせて4段階のボックスモデルっていうんだなくらいの理解で大丈夫です

先ほどの内側と外側というのは、borderを基準として内側がpadding、外側がmarginと覚えておけばいいと思います

次からは簡単なボタン作成を例にそれぞれの使い分けを考えていきます

ボタン作成によるそれぞれの使い分け方

簡単なボタンの作成を通して使い方を学んでみましょう

これは、pタグを使って”ボタンというコンテンツです”とHTMLで書いたものです

さらに、CSSでボタンに背景色を指定してあげます

この黄色い部分が”ボタンというコンテンツです”という部分の中身になります

HTML

<p class=”button”>ボタンというコンテンツです</p>

CSS

.button{

background-color: #facf5a;

}


pタグはblock要素になるため、黄色いコンテンツの部分が画面の横幅いっぱいに広がってしまいます

そのためにinline-blockを使って、文章分の横幅にしてあげましょう

CSS

.button{

background-color: #facf5a;

display:inline-block;
}


このままだと幅がせますぎて、押しにくいボタンになっています

ここでpaddingの出番です

paddingを使って文章の周りに余白を作りましょう

paddingの値によって余白の大きさが変わります

上のボタンは30px、下のボタンは倍の60pxで作ってみました

CSS(上のボタン)

.button{

background-color: #facf5a;

display:inline-block;

padding:30px;

}

CSS(下のボタン)

.button{

background-color: #facf5a;

display:inline-block;

padding:60px;

}


さらに、paddingの周りにはborderの指定ができます

普通にborderを指定すると上の画像のように上下左右に枠線のようなものがつきます

今回はボタンの影としてborderを使用するので、border-bottom(下線)を使います

上のボタンはborder-bottom(黒の枠線)を3px、下の画像は8pxに設定しました

ちなみにsolidというのは1本線のことで、doubleにすると2本線などさまざまな指定があります

CSS(上のボタン)

.button{

background-color: #facf5a;

display:inline-block;

background-color: #ffff99;

border-bottom:3px solid black;

}

CSS(下のボタン)

.button{

background-color: #facf5a;

display:inline-block;

background-color: #ffff99;

border-bottom:8px solid black

}

さらに、borderのさらなる応用のborder-radiusを使って縁を少し丸くします

border-radiusはpxの値が大きくなるほど丸くなっていきます

今回は上のボタンを5px、下のボタンを10pxにしてみました

丸くなったことにより、さらにボタンっぽくなりました

CSS(上のボタン)

.button{

background-color: #facf5a;

display:inline-block;

background-color: #ffff99;

border-bottom:3px solid black;

border-radius:5px;

}

CSS(下のボタン)

.button{

background-color: #facf5a;

display:inline-block;

background-color: #ffff99;

border-bottom:8px solid black

border-radius:10px;

}

最後にmarginを使ってボタンを動かしてみましょう

上のボタンはmargin-leftを30pxに、下のボタンは50pxにしてみました

ボタンというコンテンツです”の中身(黄色い部分)の大きさは変化せず、

borderのさらに外側に余白ができてますよね?

つまりmarginはpaddingとborderで作ったコンテンツの位置を変えるためのもの=要素の外側にできる余白です

逆にpaddingを指定したときは黄色い部分が大きくなりました

つまりpaddingはコンテンツ自体を大きくするもの=要素の内側にできる余白なんです

ボタンの制作過程をまとめると、

  1. inline-blockで文章の幅だけにする
  2. paddingで内側の余白を増やす
  3. borderで下線や丸みの装飾をする
  4. marginでボタンの位置を調整する

こういう流れになりました

paddingとmarginの使い分けは理解していただけましたでしょうか

自分でコードを書いてみると理解が一層深まりますよ!

まとめ

paddingとmarginの違いはborderを基準として、

  • padding:内側の余白
  • margin:外側の余白

になります

ボタン作成を例にするとそれぞれの使い分けは、

  • padding:コンテンツの大きさの変更
  • border:それぞれの装飾
  • margin:位置の調整

という風になっています

始めは理解するのが難しいですが、どんどん使っていけばわかるようになります

例にしたボタンの作成などもぜひ実際にやってみてください

もし疑問点やここ違う!などありましたら、Twitterアカウントもりもり(@moriblog_)まで来ていただけると嬉しいです!

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です