【図解】margin/paddingとは？違い・覚え方・使い分ければいいのか分かりやすく解説

marginとpaddingとは? 覚え方・使い分けを解説!

まずはじめにpadding（パディング）とmargin（マージン）にはどのような役割があるのか見ていきましょう。

「margin」と「padding」は両方とも余白をつくるためのプロパティですが、余白を作る場所が異なります。

プロパティでは、セレクタで選んだ要素の色や背景の色などといった、「要素の特性」を表します。

今回の場合では、セレクタで選んだ要素の余白を作るという特性をpaddingとmarginを使って表します。

余白を作るという特性は同じでもpaddingとmarginには大きな違いがあります。

まずはmarginとpaddingとは何かボックスを用いてお話していきたいと思います。

内側と外側の境界線となっているのが「ボーダー」と呼ばれるものです。

「ボーダー」の外側に余白を作るプロパティを「margin」と呼び、「ボーダー」の内側に余白を作るプロパティを「padding」と呼びます。

この段階ではピンときていなくても、実際に余白を作ってみるとわかることもあります。

ぜひここから読み進めていく中で、自分自身でもコードを書いてみてください。

HTML&CSS事典を欲しい方必見（kindle unlimitedだと無料で読めます）

HTML&CSSを学びたい方必見

marginの使い方

marginで余白を設定・調整することによりコンテンツ間に適切な余白を設け、見やすさ・読みやすさを向上させることができます。

なお、marginは「領域間」の余白を調整します。

領域間余白とは、要素と要素の間やコンテンツ同士の間など、「要素のエリア外の余白」を指します。

「margin」を利用して上下左右をそれぞれ設定する場合と上下左右を一括設定する場合の2つの方法があります。

上下左右をそれぞれ設定する場合

それでは上記のプロパティを利用してマージン設定をしていきましょう。

上のマージンを30px・下のマージンを30pxと設定したい場合、以下のようなソースコードとなります。

p {

 margin-top: 30px;

 margin-bottom: 30px;

}

上下左右を一括設定する場合

それでは上記のプロパティを利用してマージン設定をしていきましょう。

上のマージンを30px・下のマージンを30pxと設定したい場合、以下のようなソースコードとなります。

p {  

 margin: 30px 0 30px 0;

}

上下左右を一括設定できるmarginはプロパティ値を半角スペースで区切ることで上下左右自由に設定することができます。

marginの上下左右の設定方法は以下の通りです。

paddingの使い方

要素の余白を調整するには、paddingプロパティで調整幅を指定します。

paddingで余白を設定・調整することによりコンテンツ間に適切な余白を設けたり、文字の飾り付けやレイアウトを調整する際に重宝します。

なお、marginと違いpaddingは領域内の余白を調整します。

「padding」を利用して上下左右をそれぞれ設定する場合と上下左右を一括設定する2つの方法があります。

上下左右をそれぞれ設定する場合

それでは上記のプロパティを利用してマージン設定をしていきましょう。

上のパディングを30px・下のパディングを30pxと設定したい場合、以下のようなソースコードとなります。

p {

 padding-top: 30px;

 padding-bottom: 30px;

}

上下左右を一括設定する場合

それでは上記のプロパティを利用してパディング設定をしていきましょう。

上のパディングを30px・下のパディングを30pxと設定したい場合、以下のようなソースコードとなります。

p {  

 padding: 30px 0 30px 0;

}

上下左右を一括設定できるpaddingはプロパティ値を半角スペースで区切ることで上下左右自由に設定することができます。

paddingの上下左右の設定方法は以下の通りです。

【実践編】レンタルサーバーにファイルをアップロードしてみましょう!

HTMLやCSSで使ったファイルをレンタルサーバーにアップロードすることでインターネット上にWebサイトが公開されます。

今までローカル環境でしか見れなかったWebサイトがインターネット上に公開されるとわくわくしますよね!

余裕がある方はレンタルサーバーにファイルをアップロードしてみましょう。

無料お試し期間もあるので是非レンタルサーバーを利用して学習してみてはいかがでしょうか!?

格安プログラミングスクールを利用してHTML/CSSを勉強しましょう!

HTMLとCSSの勉強途中で分からないことがあり、中々進まないこともあると思います。

しかし、順を追って学習を進めていけば、必ずできるようになるのであきらめず最後までやりぬきましょう!

HTMLとCSSをプログラミングスクールで教わりたいという方も中にはいます。

そんな方は低価格のサブスク型プログラミングスクールがオススメです。

まとめ