問題

8
CSS

【margin】外側の余白を作ろう

この問題では、ボックスの外側の余白を調整するCSSプロパティ「margin」について学習していきます。 「margin」も「padding」同様にWeb制作で頻繁に使用するプロパティなので、しっかり覚えていきましょう。

ポイント

marginとは

marginとは要素の外側の余白を作る際に使用するCSSのプロパティです。
使用シーンとしては主に要素同士の間隔を空けたり、要素を中央寄せにする際です。

初期値は書くプロパティに準ずるものとなっており、0のものもあれば、pタグのように上下のみに16pxずつ入るものもあります。
初期値を解除したい場合は、CSSであらかじめ設定しておきましょう。

marginの指定方法

marginプロパティの指定方法はpaddingプロパティと同じになります。

1.上下左右すべてを同じ余白にする場合
margin: 10px;
2.上下と左右の余白を変える場合
margin: 10px 20px;
(左が上下、右が左右)
3.4方向全ての余白を変える場合
margin: 10px 20px 30px 40px;
(左から上、右、下、左)
4.個別で指定する場合
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

CSSの問題に挑戦しよう!

問題

【margin】外側の余白を作ろう

用意したboxの右側に20pxの余白を空けてみよう。

あらかじめエディタに書くコード

                    <div class="boxs">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
¥HTML¥
                
                    .boxs {
  display: flex;
}

.box {
  background: white;
  border: 2px solid black;
  width: 100px;
  height: 100px;
}
¥CSS¥
                

期待する画面

解答の画像

解答と解説

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

marginを使用する際は、paddingと同じで方向を指定して余白を空ける方法とショートハンドを記法を使って書く方法があります。
ショートハンドの場合は上、右、下、左の順番に余白を指定します。

今回の問題では、右側の指定なのでmargin-rightとして20pxを指定すればOKです。
ショートハンドで書く場合は、margin: 0 20px 0 0;とします。
1方向の指定であれば単体のプロパティを使う方が良さそうですね。

さらにスキルアップしたい方は公式LINEから「CSS」と送信すると動画が見れます。

LINE登録して動画を視聴する
今なら豪華5大特典もらえる! LINE登録でGET