|
{margin:値;}、{margin-位置:値;}でフォーム全体やフォームの部品の外側の余白を指定することができます。
ブロック要素である<form>～</form>の外側には
余分な余白が入ってしまいます。しかしmarginの値を0にすることで
余白を無くすことができます。
余白の指定方法は以下の通りです。（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-left:値;
padding-left:値;
|
左の余白だけ指定します。 |
margin-bottom:値;
padding-bottom:値;
|
下の余白だけ指定します。 |
【ブラウザ表示】
上部まで50px
下部まで50px
ソース
上部まで50px
<form method="POST" class="outspace1" action="xxx.cgi">
<p>
<input type="text" name="text1" value="左から70pxの距離→">
<input type="submit" value="送信" class="outspace2">
</p>
</form>
下部まで50px
外部ファイル
form.outspace1{margin:50px 0px;}
input.outspace2{margin-left:70px;}
<body>～</body>に直接記入する場合
上部まで50px
<form method="POST" style="margin:50px 0px;" action="xxx.cgi">
<p>
<input type="text" name="text1" value="左から70pxの距離→">
<input type="submit" value="送信" style="margin-left:70px;">
</p>
</form>
下部まで50px
■ フォームの部品の内側の余白を指定する
{padding:値;}、{padding-位置:値;}でフォームの部品の内側の余白を指定することができます。
内側の余白の指定パターンは上の表を参照して下さい。（paddingの方）
【ブラウザ表示】
ソース
<form method="POST" action="xxx.cgi">
<p>
<input type="text" name="text1" value="テキストフィールド" class="inspace1">
<input type="submit" value="送信" class="inspace2">
</p>
</form>
外部ファイル
input.inspace1{
width:200px;
height:100px;
padding:50px;
}
input.inspace2{padding:50px;}
<body>～</body>に直接記入する場合
<form method="POST" action="xxx.cgi">
<p>
<input type="text" name="text1" value="テキストフィールド"
style="width:200px; height:100px; padding:50px;">
<input type="submit" value="送信" style="padding:50px;">
</p>
</form>
■ その他の項目
・
ボタンや入力欄のサイズを変える
・
文字のサイズや色を変える
・
枠線の太さ、色、種類を指定する
・
背景色や画像を指定する
・
フォームを並べる
・
入力欄の入力モードを変更する
・
フォームの部品の色を変える
スタイルシート一覧のページに戻る
|
