ログイン
問題8

【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の問題に挑戦しよう!

以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、CSSマスターへの道の第一歩となるでしょう。

問題8:【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¥
              

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

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

コメントのアイコン解説

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

今回の問題では、右側の指定なのでmargin-rightとして20pxを指定すればOKです。
ショートハンドで書く場合は、margin: 0 20px 0 0;とします。
1方向の指定であれば単体のプロパティを使う方が良さそうですね。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする

LINE登録で、Web制作に役立つコンテンツ配信中‼

LINEの友達追加でお役立ち動画をGET!!
LINEの友達追加でお役立ち動画をGET!!