|
{margin:値;}、{margin-位置:値;}で水平線の外側の余白を指定することができます。
値はpxや%で指定します。
余白の指定方法
水平線の外側の余白の指定方法は以下の通りです。
| 余白を入れたい位置 |
説明 |
| margin:値; |
値が1個の場合、上下左右 全ての余白が入ります。 |
| margin:値1 値2; |
値1が上下、値2が左右の余白です。 |
| margin:値1 値2 値3; |
値1が上、値2が左右、値3が下の余白です。 |
| margin:値1 値2 値3 値4; |
値1が上、値2が右、値3が下、値4が左の余白です。 |
| margin-top:値; |
上の余白だけ入れます。 |
| margin-right:値; |
右の余白だけ入れます。 |
| margin-left:値; |
左の余白だけ入れます。 |
| margin-bottom:値; |
下の余白だけ入れます。 |
【ブラウザ表示】
ソース
<hr class="hyohaku1">
<hr class="hyohaku2">
<hr class="hyohaku3">
<hr class="hyohaku4">
<hr class="hyohaku5">
外部ファイル
hr.hyohaku1{margin:50px 0px 0px;}
hr.hyohaku2{margin-top:30px;}
hr.hyohaku3{margin-right:300px;}
hr.hyohaku4{margin-bottom:80px;}
hr.hyohaku5{margin-left:300px;}
<body>～</body>に直接記入する場合
<hr style="margin:50px 0px 0px;">
<hr style="margin-top:30px;">
<hr style="margin-right:300px;">
<hr style="margin-bottom:80px;">
<hr style="margin-left:300px;">
■ その他の項目
・
水平線の横幅、高さを指定する
・
枠線の太さ、種類、色を指定する
・
背景色や画像を指定する
・
水平線の表示位置を指定する
スタイルシート一覧のページに戻る
|
