概要
普段自分が行っている。marginとpaddingの使い分けの方法をまとめます。
記事は「HTML編」と「CSS編」と「演習編」の3つから構成しています。
HTML編までのindex.htmlの確認
CSS編で作成したHTMLは以下になります。
<body>
<div data-wrap="水色の大枠" style="background-color: aquamarine; padding: 52px 0 0 0;">
<div data-wrap="タイトル">提供可能な各クレジットカードについて</div>
<div data-wrap="概要" style="margin: 52px 0 0 0;">各クレジットカードによって提供されるサービスが異なります。以下のそれらをまとめました。</div>
<div data-wrap="カードプランの大枠" style="display: flex;">
<div data-wrap="茶色の枠" style="background-color: chocolate;">
<div data-wrap="カード名">スタンダードカード</div>
<div data-wrap="カード詳細">スタンダードカードは年会費無料でご利用いただけます。ご利用金額の0.5％がポイントとしてたまっていきます。</div>
</div>
<div data-wrap="茶色の枠" style="background-color: chocolate;">
<div data-wrap="カード名">プレミアムカード</div>
<div data-wrap="カード詳細">プレミアムカードは年会費10000円でご利用いただけます。ご利用金額の2.0％がポイントとしてたまっていきます。</div>
</div>
</div>
</div>
</body>
演習内容
前回までで余白の使い分け方法は学んだため、今回は演習になります。
それぞれの完成図の余白を付けるにはmarginとpaddingのどちらをどの要素に当てればよいのか考えながら行ってみてください。
演習①
画像のピンクの部分の余白を取りたい場合
答え
<div data-wrap="水色の大枠" style="background-color: aquamarine; padding: 52px 0 0 0;">
↓
<div data-wrap="水色の大枠" style="background-color: aquamarine; padding: 52px 52px 52px 52px;">
演習②
画像のピンクの部分の余白を取りたい場合
答え
<div data-wrap="カードプランの大枠" style="display: flex;">
↓
<div data-wrap="カードプランの大枠" style="display: flex; margin: 52px 0 0 0;">
演習③
画像のピンクの部分の余白を取りたい場合
答え
<div data-wrap="茶色の枠" style="background-color: chocolate;">
↓
<div data-wrap="茶色の枠" style="background-color: chocolate; margin: 0 0 0 20px;">
演習④
画像のピンクの部分の余白を取りたい場合
答え
<div data-wrap="茶色の枠" style="background-color: chocolate;">
↓
<div data-wrap="茶色の枠" style="background-color: chocolate; padding: 20px 20px 20px 20px;">
演習⑤
画像のピンクの部分の余白を取りたい場合
答え
<div data-wrap="カード詳細">スタンダードカードは年会費無料でご利用いただけます。ご利用金額の0.5％がポイントとしてたまっていきます。</div>
↓
<div data-wrap="カード詳細" style="margin: 20px 0 0 0;">スタンダードカードは年会費無料でご利用いただけます。ご利用金額の0.5％がポイントとしてたまっていきます。</div>