|
{margin:値;}、{margin-位置:値;}でボックスの外側（周囲）の余白を指定することが出来ます。
値はpx、%などで指定します。
■ ボックスの外側の余白を指定する
ボックスの外側（周囲）の余白の指定方法は以下の通りです。（marginの方）
| 余白を入れたい位置 |
説明 |
margin:値;
padding:値;
|
値が1個の場合、上下左右 全ての余白が入ります。 |
margin:値1 値2;
padding:値1 値2;
|
値1が上下、値2が左右の余白です。 |
margin:値1 値2 値3;
padding:値1 値2 値3;
|
値1が上、値2が左右、値3が下の余白です。 |
margin:値1 値2 値3 値4;
padding:値1 値2 値3 値4;
|
値1が上、値2が右、値3が下、値4が左の余白です。 |
margin-top:値;
padding-top:値;
|
上の余白だけ入れます。 |
margin-right:値;
padding-right:値;
|
右の余白だけ入れます。 |
margin-bottom:値;
padding-bottom:値;
|
下の余白だけ入れます。 |
margin-left:値;
padding-left:値;
|
左の余白だけ入れます。 |
【ブラウザ表示】
天井
ボックスの上下に30pxの余白
床
ソース
天井
<div class="yohaku1">ボックスの上下に30pxの余白</div>
床
外部ファイル
div.yohaku1{
border:1px black solid;
margin:30px 0px;
}
<body>～</body>に直接記入する場合
天井
<div style="border:1px black solid; margin:30px 0px;">
テーブルの上下に30pxの余白
</div>
床
■ ボックスの内側の余白を指定する
{padding:値;}、{padding-位置:値;}でボックスの内側の余白を指定するこ
とが出来ます。
内側の余白の指定パターンは上の表を参照して下さい。（paddingの方）
【ブラウザ表示】
内側の余白40px
ソース
<h5 class="yohaku2">内側の余白40px</h5>
外部ファイル
h5.yohaku2{
border:1px solid;
width:200px;
padding:40px;
}
<body>～</body>に直接記入する場合
<h5 style="border:1px solid; width:200px; padding:40px;">
内側の余白40px
</h5>
■ その他の項目
・
枠線の太さを指定する
・
枠線の種類を指定する
・
枠線の色を指定する
・
個別の枠線を一括に指定する
・
ボックスの横幅、高さを指定する
・
背景色や画像を指定する
・
背景画像の表示方法を指定する
・
背景画像の表示位置を指定する
・
ボックスを並べる
・
はみ出る部分を表示させる
・
ボックスの配置方法を指定する
・
背景画像の表示領域を指定する
・
枠線の4隅の角丸を指定する
・
枠線の4隅の角丸を個別に指定する
スタイルシート一覧のページに戻る
|
