サイト内検索
...スタイルシート(css)...
スタイルシート・フォーム
フィールドセットの余白
- フィールドセットの外側の余白は、フォーム(form要素)のfieldset要素に
- marginプロパティを指定します。
- フィールドセットの内側の余白は、フォーム(form要素)のfieldset要素に
- paddingプロパティを指定します。
- [使い方]
- fieldset{
margin: 40px;
padding-top: 40px;
}
プロパティ名 | 値 | 説明 |
---|---|---|
margin: | ; |
外側の余白を指定できます。
「数値+単位」(例・・100px)を指定します。 単位は、「px」・「em」など、または「%」を指定します。 auto(自動) |
padding: | ; |
内側の余白を指定できます。
「数値+単位」(例・・100px)を指定します。 単位は、「px」・「em」など、または「%」を指定します。 |
サンプル
[headの中]
<style type="text/css"><!--
legend{
background-color: #ffffff;
}
fieldset {
width: 450px;
margin: 20px;
padding-top: 10px;
padding-bottom: 20px;
padding-left: 30px;
}
fieldset input {
width: 250px;
}
-->
</style>
[bodyの中]
<form method="post" action="sample.cgi"><fieldset>
<legend> ユーザー登録<legend>
ニックネーム:<input type="text" name="user" size="20">
パスワード:<input type="text" name="pass" size="20">
e-mail:<input type="text" name="email" size="70">
</fieldset>
<fieldset>
<legend>登録内容</legend>
お名前:<input type="text" name="name" size="20">
ご住所:<input type="text" name="address" size="70">
電話番号:<input type="text" name="tel" size="20">
</fieldset>
<div class="sample-1">
<input type="submit" value="登録する">
</div>
<div class="sample-2">
<input type="reset" value="リセット">
</div>
</form>
[ブラウザ上]