CSS
LINEでログイン
Googleでログイン
Twitterでログイン
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¥
完了にする！
活動記録をTweetする
ショートハンドの場合は上、右、下、左の順番に余白を指定します。
今回の問題では、右側の指定なのでmargin-rightとして20pxを指定すればOKです。
ショートハンドで書く場合は、margin: 0 20px 0 0;とします。
1方向の指定であれば単体のプロパティを使う方が良さそうですね。