今回はCSSの講座です！
サイトをデザインする上で必ず必要になるmarginとpaddingの違い。
また、実際にどう設定していくのか。
早速初めていきましょうー！
目次
marginとpadding
そもそもmarginってなんなの？
paddingもだけど・・・って感じですよね。わかります。僕もなんのこと？？？でした（笑）
簡単に言ってしまうと、それは余白です。
どちらもホームページの余白を設定するものなんです。
まだよく分からないですね（笑）
paddingって？
paddingは要素の内側の余白の設定のことです。
？？？という感じだと思うので、まずはこの写真をご覧ください。
このホームページのトップ画面を検証で開いたものになります。
よく見ると青色とオレンジ色、緑色で分かれているのがわかります。
この青色がページの内容になります。
今回ですと、記事のラインナップですね。
オレンジ色と緑色、この二つがそれぞれmarginと paddingになります。
同じ余白なのに、何が違うのー？？？
この写真の一部を拡大すると
cssの設定とその図が書いてありますね。
理解するために数字をいじってみましょう。
（実際に変更して見ると理解が深まりますよ！）
では、
padding:10px;
これを
padding:50px;
に変更して見ると・・・
上の写真と比べ、記事のラインナップの周りの余白が広がっていますね！
今変更したpaddingは要素の内側の余白の設定になります。
投稿のラインナップが内側にギュッとなったのも写真を見比べてわかります。
marginって？
ではmarginは？
要素の外側の余白の設定になります。
先ほど同様に、変更してみましょう。
margin-right:340px;
から
margin-right: 500px;
に変更して見ると・・・
記事のラインナップの右側の余白が広くなったのがわかると思います。
これが要素の外側の余白の設定、つまりmarginの設定になるわけです。
当社のホームページのレイアウトを考えて、margin-rightは340pxがちょうどいい大きさ。といった具合に余白をうまく設定して、見やすくて、良いホームページを作っていきましょう！
コメント