こんにちは、解説ゾロです！
「padding」？「margin」？
聞いたことがあるような、ないような・・・！
読み方は「パディング」と「マージン」、役割は、2つとも余白を作るコード！
えっ！ 2つとも余白？ コード・・・？ 意味わかんない！・・・笑
「padding」も「margin」も、2つとも余白を作るなら、何が違うのっていう話しです・・・よね！笑
今日は「padding」と「margin」の違いと使い分けについて、初めて聞いた方でも「こういうことね！」と、必ず納得していただけるように詳しく丁寧に解説をいたします。この、「padding」と「margin」は意外と重宝しますので、今日も一緒にやりましょ！
「padding」と「margin」の違いと使い分けを図解で解説
こんな感じに余白が入り、程よく離れてくれたので、バランスがよくなりました。
このように余白の場所が、文字から枠線（border）までの内側の「padding」と、枠線（border）の外側の「margin」があることが目視確認できました。
2つの余白を適所に指定すると全体的にバランスの取れた素敵なデザインに改善することができます。使い方も簡単で、ワードプレスの「投稿を編集」の「ビジュアル」の画面から「テキスト」の画面に変更して、このコードを追加することで機能が発揮します。コードの書き方も後ほど解説いたします。
「padding」と「margin」の違いを解説
- 内側の余白の「padding」は「文字」から「枠線」の間の余白
- 外側の余白の「margin」 は「枠線」から外側の余白
「padding」を指定した「実際の画像」
「padding」のコードの書き方
「padding」を指定した画像
「padding」の意味
「margin」を指定した「実際の画像」
今度は、このサンプルの「1.ここに文字」の位置が左に寄りすぎてるなぁ！と感じた場合は、外側に余白を入れる「margin」が調整をしてくれます。こちらも、わかりやすいように50pxという余白で指定してみます。そのコードは、 margin: 50px; です。
「margin」のコードの書き方
「margin」も、基本のコードに margin: 50px; を追加するだけです。
「margin」を指定した画像
「margin」の意味
①のように「枠の外」に50px分の余白を入れてくれます。⇩
「padding」と「margin」の違い
「padding」と「margin」の違いを、またまた再確認してみます。
- 内側の余白の「padding」
- 外側の余白の「margin」
- 「padding」は、内側の余白
文字から、枠線までの、スペースを調整 - 「margin」は、外側の余白
枠線から外側に余白を入れて、位置を調整
です。違いがハッキリしてくると、使い分けも簡単にわかります・・・よね！笑
では、次にサンプルの「1.ここに文字」に「padding」と「margin」の両方を指定してみます。
「padding」と「margin」の2つを指定した「実際の画像」
「padding」と「margin」のコードの書き方
同じように、基本のコードに、padding: 50px; margin: 50px; を追加することで、内側と外側に余白が入ります。
「padding」と「margin」を指定した画像
「padding」と「margin」の意味
⇩文字と枠線の間の四方に50px分paddingの余白を、
①のように入れると文字が見やすくなり、枠線の外側の四方にも50px分marginの余白を、
②のように入れると「枠」自体が右に移動してバランスを取ることができます。⇩
「padding」と「margin」のまとめ画像
まとめ
「padding」と「margin」2つの存在が頭に入れば、どちらか片方の「内」か「外」の余白か、だけを覚えておけば、どっちがどうだっけか？何てこともなくなります・・・よね！笑
他にも指定する方法が「％」の方法があったり、隣同士が「margin」で指定されている場合は値が大きい方が反映される相殺が起こったりと、色々ありますが、取りあえず今日の内容を頭に入れておけばすぐに利用することができてgoodです。
覚えてしまえば、使い勝手が良い機能です。
益々、あなた様のブログが素敵になっていきますように！
最後までお読みいただき、大変ありがとうございました。
では、また。解説ゾロでした！
関連記事：paddingとmarginで上下左右の余白をバラバラに個別指定する7つの書き方
関連記事：ワードプレスでおしゃれな囲み枠の作り方はソースコードのコピペだけ
関連記事：ワードプレスで文字幅に合わせた囲み枠のサンプルコードで簡単に設置
