第7回 (2022/12/21)
余白
内側の余白
上下左右の余白指定
padding: 上下の値 左右の値;
<< 例 >>
padding: 20px 0;
4辺の余白指定
padding: 上の値 右の値 下の値 左の値;
<< 例 >>
padding: 20px 15px 5px 20px;
外側の余白
上下左右の余白指定
margin: 上下の値 左右の値;
<< 例 >>
margin: 20px 0;
4辺の余白指定
margin: 上の値 右の値 下の値 左の値;
<< 例 >>
margin: 20px 15px 5px 20px;
余白の効率的な書き方（marginとpadding）
上下左右が同じ
margin: 10px;
上下と左右が同じ
margin: 10px（上下） 5px（左右）;
左右が同じで上下が違う
margin: 10px（上） 5px（左右）5px（下）;
上下左右すべて違う
margin: 10px（上） 5px（右）5px（下） 15px（左）;
上の余白のみ指定
margin-top: 10px;
右の余白のみ指定
margin-right: 10px;
下の余白のみ指定
margin-bottom: 10px;
左の余白のみ指定
margin-left: 10px;
要素を中央寄せにする
ブロックボックス
margin: 10px auto;
インラインボックス
text-align: center;
横幅の指定
width: 100px;
CSSの複数指定
「,」で区切る。
CSSで使う単位
絶対的なサイズ指定
- px : 1/96インチ
相対的なサイズ指定
- rem : フォントサイズ基準
- % : プロパティによって基準が違う
- em : フォントサイズ基準
- vw : ビューポートの幅に対するパーセント値
- vh : ビューポートの高さに対するパーセント値
