問題
8【margin】外側の余白を作ろう
この問題では、ボックスの外側の余白を調整するCSSプロパティ「margin」について学習していきます。 「margin」も「padding」同様にWeb制作で頻繁に使用するプロパティなので、しっかり覚えていきましょう。
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¥
期待する画面
解答と解説（【margin】外側の余白を作ろう）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
marginを使用する際は、paddingと同じで方向を指定して余白を空ける方法とショートハンドを記法を使って書く方法があります。
ショートハンドの場合は上、右、下、左の順番に余白を指定します。
今回の問題では、右側の指定なのでmargin-rightとして20pxを指定すればOKです。
ショートハンドで書く場合は、margin: 0 20px 0 0;とします。
1方向の指定であれば単体のプロパティを使う方が良さそうですね。
ポイント
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;
