CSSで頻繁に使用するマージン（margin）とパディング（padding）ですが、似たような指定のため、ごちゃごちゃになってしまう方もいらっしゃるかと思います。
今回はこのマージン（margin）とパディング（padding）について詳しく、かつ簡単に解説させていただきます！
本記事を読むことによって、マージンとパディングについてしっかり理解して、実際のコーディングでも使用できるようになると思います！
実際の記載方法にも触れていきますので、ぜひ最後まで読んでいただけると幸いです！
マージン（margin）とは？
CSSでは余白を表す意味合いで使用されており、主にHTMLの要素と要素の間隔を調整するために使用します。
まずは下記の例をご覧ください。
<!-- HTML -->
<div class="box-1">box-1</div>
/* CSS */
.box-1 {
width: 200px;
height: 200px;
background-color: pink;
}
このようにボックスが表示されます。
もう一つ別の名前で追加してみましょう。
<!-- HTML -->
<div class="box-1">box-1</div>
<div class="box-2">box-2</div>
/* CSS */
.box-1 {
width: 200px;
height: 200px;
background-color: pink;
}
.box-2 {
width: 200px;
height: 200px;
background-color: orange;
}
特に指定をしていないため、くっついて表示されています。
ここにマージンを指定してみます。
/* CSS */
.box-1 {
width: 200px;
height: 200px;
background-color: pink;
margin-bottom: 30px; /* 追加 */
}
.box-2 {
width: 200px;
height: 200px;
background-color: orange;
}
「box-1」のclassが付与されている要素の下に「margin-bottom: 30px」を指定しました。マージンでは要素の外側、いわゆる余白にあたる部分の幅を指定するプロパティとなります。
marginプロパティでは、上下左右に指定することが可能です。
margin-top: 40px; /* 要素の上側に40pxの余白 */
margin-right: 30px; /* 要素の右側に30pxの余白 */
margin-bottom: 20px; /* 要素の下側に20pxの余白 */
margin-left: 10px; /* 要素の左側に10pxの余白 */
上下左右を一気に指定することも可能で、実際には下記の指定方法をよく使用します。
margin: 40px 30px 20px 10px; /* 上側 右側 下側 左側 */上側から始まり、時計回りに値を指定します。
このパターンでは、4方向すべて違う値でしたが、実際にはさまざまなパタンがあり、指定方法も異なります。
下記がその他の例となります。
/* 4方向すべて同じ場合の省略形 */
margin: 40px;
/* 上下は40px、左右は20pxの省略形 */
margin: 40px 20px;
/* 上下は40px、左右は30px、下は20pxの省略形 */
margin: 40px 30px 20px; パディング（padding）とは？
マージンは外側の余白という意味でした。パディングは反対で、要素の内側の余白になります！
先ほど使用した図でパティングを使用してみましょう。
/* CSS */
.box-1 {
width: 200px;
height: 200px;
background-color: pink;
margin-bottom: 30px;
padding-top: 20px /* 追加 */
}
.box-2 {
width: 200px;
height: 200px;
background-color: orange;
}
ピンクの中に余白ができているのがわかるかと思います。「padding-top: 20px」を指定することによって、要素の内側の上側に余白が作成されています。
/* CSS */
.box-1 {
width: 200px;
height: 200px;
background-color: pink;
margin-bottom: 30px;
padding-top: 20px /* 追加 */
padding-left: 20px; /* 追加 */
}
.box-2 {
width: 200px;
height: 200px;
background-color: orange;
}今度は左側にもパティングを追加してみました。
要素の中の左側にも余白が作成されました。
パディングもマージンと同様に省略形での記載が可能です。
pading-top: 40px; /* 要素内の上側に40pxの余白 */
pading-right: 30px; /* 要素内の右側に30pxの余白 */
pading-bottom: 20px; /* 要素内の下側に20pxの余白 */
pading-left: 10px; /* 要素内の左側に10pxの余白 */
/* 上側 右側 下側 左側 */
pading: 40px 30px 20px 10px;/* 4方向すべて同じ場合の省略形 */
pading: 40px;
/* 上下は40px、左右は20pxの省略形 */
pading: 40px 20px;
/* 上下は40px、左右は30px、下は20pxの省略形 */
pading: 40px 30px 20px;省略形で記載したほうがよい？
結論から言って、省略形で記載しなくても、動きに変化があるわけではないので、必須ではありません！
ですが、コーディングの量が多くなってくると、省略できるところを省略していかないと、ものすごく長いコードになってしまい、見辛くなってしまうんですね・・・
省略形を使用しないと、どこまでもスクロールするなんてことに・・・
コーディングにおいては、1画面でどれだけコードが見れるか、というところが非常に大事になってきます。
さいごに
マージンとパディングについて、解説させていただきました。
ごちゃごちゃになりやすいですが、どちらも実際のコーディングではなくてはならない存在で、非常に大事な部分になります。
実際に使用しながら、理解を深めていけば大丈夫です。
本記事にて少しでもお悩みの解決に繋がれば幸いです！
