paddingとmarginの違い

今回はpaddingとmarginについて解説していきます。

結論

結論から言うと
・paddingは内側の余白
・marginは外側の余白
です。

それぞれを設定することで、要素に余白をつける事ができます。
htmlやcssを始めたての方は、混乱しがちなので簡単に覚えておきましょう。

例文

以下は例文です。

個別に指定

padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;

/* ※marginも同様 */

まとめて指定

/* 上 右 下 左 */
/* 時計回り */
padding: 10px 5px 10px 5px;

/* 上下が10px、左右が5px */
padding: 10px 5px;

ここまでのコードは全て同じ動作になります。

/* 上下左右全て10px */
padding: 10px;

このように複数の書き方が可能です。

それでは今回はここまでです！見てくださってありがとうございました！