余白を設定する
スタイルシートでは外側の余白と内側の余白を指定することができます。
外側の余白はmargin、内側の余白はpaddingを使用します。
外側の余白(margin)
外側の余白にはmargin-top(上余白)、margin-bototm(下余白)、
margin-left(左余白)、margin-right(右余白)があります。
上余白は30px、左余白は20pxなど複数で異なる値を指定できます。
またmarginだけの場合は、上下左右の余白が1回で指定できます。
HTMLファイル
<div style="border:1px solid;">
<div style="margin:30px;background-color:orange;">margin:30px</div>
</div>
<div style="border:1px solid;">
<div style="margin-top:30px;background-color:orange;">margin-top:30px</div>
</div>
<div style="border:1px solid;">
<div style="margin-bottom:30px;background-color:orange;">margin-bottom:30px</div>
</div>
<div style="border:1px solid;">
<div style="margin-left:30px;background-color:orange;">margin-left:30px</div>
</div>
<div style="border:1px solid;">
<div style="margin-right:30px;background-color:orange;">margin-right:30px</div>
</div>
|
結果
内側の余白(padding)
内側の余白にはpadding-top(上余白)、padding-bototm(下余白)、
padding-left(左余白)、padding-right(右余白)があります。
上余白は30px、左余白は20pxなど複数で異なる値を指定できます。
またpaddingだけの場合は、上下左右の余白が1回で指定できます。
HTMLファイル
<div style="border:1px solid;">
<div style="padding:30px;background-color:orange;">padding:30px</div>
</div>
<div style="border:1px solid;">
<div style="padding-top:30px;background-color:orange;">padding-top:30px</div>
</div>
<div style="border:1px solid;">
<div style="padding-bottom:30px;background-color:orange;">padding-bottom:30px</div>
</div>
<div style="border:1px solid;">
<div style="padding-left:30px;background-color:orange;">padding-left:30px</div>
</div>
<div style="border:1px solid;">
<div style="padding-right:30px;background-color:orange;">padding-right:30px</div>
</div>
|
結果
また、外側の余白(margin)と内側の余白(padding)を同時に使うこともできます。
文字や配置などレイアウトで非常によく使います。
まとめ
- 外側の余白はmarginを使用する。
- margin-top(上余白)、margin-bototm(下余白)、margin-left(左余白)、margin-right(右余白)を個々に設定できる。
- 内側の余白はpaddingを使用する。
- padding-top(上余白)、padding-bototm(下余白)、padding-left(左余白)、padding-right(右余白)を個々に設定できる。
- marginまたはpaddingの場合は、上下左右の予約を設定できる。
スタイルシート講座
|
初心者講座
スポンサードリンク
スタイルシート辞典
テキスト
フォント
背景
ボックス
配置
リスト
テーブル
ユーザインタフェース
その他
|
