余白を設定しよう！（marginとpadding）

色々なWebサイトを見てみると、文章や画像などのコンテンツを見やすくするための様々な工夫がなされていることがわかります。その中の１つが適切な余白の設定です。
この記事も、左や右に寄りすぎず真ん中をキープしていると思います。（全てのブラウザ・バージョンで確認したわけではないので断言はしませんw）
いくら内容が充実していても、「配置が整っていなくて見にくい」というだけでWebデザインとしては致命的です。
そのため、CSSでまず何から覚えた方が良いか迷った場合は、今回紹介する余白設定（marginとpadding）からが良いです。

ただ、余白の設定は単純なようでかなり奥が深く、一朝一夕で簡単にマスターできるものではないということは頭に入れておいた方が良いかもしれません。
というのも、余白の調整はホームページ制作アシストソフトでも使わない限り、マウスのドラッグ＆ドロップで感覚的にできるわけではなく、地道にCSSで細かく設定する必要があります。
そしてレイアウトによっては余白設定ではなく、positionプロパティや display：flex などで行なった方が良い場合も多いです。（※positionやdisplayについては別の回で説明します）

Web制作初心者の目標としては、まずは基本的な余白設定を覚えて「完璧じゃなくてもある程度見た目を整えられる」というあたりを目指すと良いと思います。
それでは、余白設定の仕方について説明していきます！

◆ margin（マージン）とは ◆

margin（マージン）プロパティは、要素の外側の余白の設定を調整するプロパティです。
margin-top, margin-right, margin-bottom, margin-left というふうに、４方向への余白の幅を設定することができます。
４方向すべて別々に設定しなくても、margin: 20px; と記述すると「上下左右にそれぞれ20pxの余白を設定」という意味になります。
また、margin: 20px 10px; というふうに値を２つ指定すると、「上下は20px、左右は10pxの余白を設定」となります。
さらに、margin: 20px 10px 15px 0; というように値を４つ指定すると、「上は20px、右は10px、下は15px、左は余白なし（0px）」となり、１行で４方向の余白を指定することが可能です。
※１度に指定する場合は、上から順に時計回りに指定されると覚えると分かりやすいです。

また、marginプロパティの値は単位が必須です。（0、auto指定の場合を除く）
以前の記事で紹介した単位（px、%、em、rem）は全て使用可能なのですが、まずは絶対単位の px で慣れてから相対単位での調整にチャレンジするとスムーズに習得できるのではないかと思います。

それでは、marginの基本を押さえたところでサンプルコードを見てみましょう！

HTML
<p>この文章の左の余白を30pxに設定</p>

CSS
     p {
        margin-left: 20px;
        background-color: lightyellow;
        width: fit-content;
      }

bockground-colorとwidthは、分かりやすくするための記述なので気にしないで下さい。
上記のコードを実行するとこのようになります。

この文章の左の余白を30pxに設定

いかがでしょうか？要素の左側に少し間隔ができたのが確認できますね。

また、marginプロパティの値では「auto」を指定することもできますが、auto指定にすると親要素の幅によって外側の余白が自動的に指定されます。
といっても、「コンピューターが人間にとって見やすいように、良い感じに間隔を計算してくれる」というような便利なものではありません。
margin: auto; は、要素を中央に配置したい場合などによく使うのですが、中央揃えについては他のやり方もあって、ここで説明するとかなり長くなるので別の回で詳しく説明します。

POINT!

・margin（マージン）は要素の外側の余白を指定する！
・余白を指定できるのは上下左右の４方向！

◆ padding（パディング）とは ◆

paddingプロパティは、要素の内側の余白の設定を調整するプロパティです。
また、値の設定の仕方はmarginと全く同じなので割愛します。
唯一、 paddingプロパティがmarginプロパティと異なる点は、marginは要素の外側の余白を調整しますが、paddingは内側の余白を調整するという点だけです。

というか、要素の外側とか内側とか言われてもピンときませんよね。
百聞は一見にしかず。先程はmarginプロパティを使って要素の左側に余白をつけましたが、今度はpaddingプロパティで同じように要素の左側に余白をつけてみます。

それではまずは、コードの紹介からです。

HTML
<p>この文章の左の内側の余白を30pxに設定</p>

CSS
     p {
        padding-left: 20px;
        background-color: lightyellow;
        width: fit-content;
      }

marginの６文字がpaddingに変わったのと、文章中に「内側の」という文言を入れた他に変えたところはありません。
それでは、上のコードを実際に表示させてみましょう。

この文章の左の内側の余白を30pxに設定

左側に余白ができるのはmarginと同じですが、余白のでき方が違いますね。
marginは背景色（薄い黄色）のところに変化はなく、そのまま左側に余白ができていました。
一方、paddingは背景色のところが少し広がる形で左側に余白ができています。
より分かりやすくするために、marginで設定したものとpaddingで設定したものをくっつけて並べてみましょう。

上がmargin、下がpaddingです。

この文章の左の余白を30pxに設定

この文章の左の内側の余白を30pxに設定

細かい違いではありますが、違いは一目瞭然ですね。
このように、余白といってもどこを広げたいかによって使い分ける必要があります。

POINT!

・paddingは要素の内側の余白を設定する！
・値の指定の仕方はmarginと全く同じ！

◆ marginが効かないパターン ◆

要素の配置調整にとても便利な margin・paddingですが、どんな場合にも使えるというわけではありません。
margin・paddingに限らず、一部の要素に一部のCSSが効かないということはよくあるので、全ての例外を覚えていたら正直キリがありませんし、全部覚える必要はありません。

ということで、今回は例外を２つに絞ってご紹介します。とりあえずこの２パターンだけ覚えてもらえたらWeb制作初心者としては上出来だと思います。

例外１：tableタグのtdやtrタグにmarginは効かない

tableタグを使った表は扱いが少々特殊になります。paddingでセルの内側の余白を広げることはできますが、marginで列・行間隔を調整することはできません。
以下のコードをご覧ください。表のセルにmarginとpaddingをそれぞれ設定していますが…

<table border="1" >
      <tr style ="margin-bottom:120px">
        <td style ="margin: 30px; padding:30px">セル１</td>
        <td style="margin: 30px; padding:30px">セル２</td>
      </tr>
    </table>

これを表示させるとこんな感じになってしまいます。

セル１

セル２

表のセルの内側は広がっていますが、セル同士の間隔が空かない＝marginが効かないというのが分かりますね。
ちなみにですが、表の行や列の間隔を空けるためのCSSプロパティは別にちゃんと用意されています。

そしてもう１つ、margin・paddingが効かない例外を紹介します。

例外２：spanタグには縦方向のmarginが効かない

こちらも実際に見てもらおうと思います。

<span style="width: fit-content; height:50px; margin-top:100px; margin-left: 50px; background-color:lightyellow;">縦方向の間隔が空きません！</span>

上のコードでは、spanタグにmarginで左側と上側に余白を設定しています。
コードを表示させてみて、左側は効くのに上側は効かないことを確認してみましょう。
縦方向の間隔が空きません！
spanタグはインラインレベルのタグなのでこういうことがよく起こります。displayプロパティでspanタグをブロックレベルにすれば、効くようになります。

このように、marginとpaddingを始めとしたCSSプロパティはいつも、何に対しても効くわけではありません。「効かないな？」と思ったら、CSSプロパティの詳細を検索して、調べてみるクセをつけておくと良いです。

POINT!