サイト内検索
...スタイルシート(css)...
スタイルシート・フォーム
内側の余白
- 内側の余白は、フォーム(form要素)のinput要素・textarea要素・select要素に
- paddingプロパティを指定します。
- [使い方]
- select{
padding: 20px;
}
プロパティ名 | 値 | 説明 |
---|---|---|
padding: | ; |
「数値+単位」(例・・100px)を指定します。
単位は、「px」・「em」など、または「%」を指定します。 auto(自動) |
プロパティ名 | 値
(サンプル) |
説明 |
---|---|---|
padding: | 10px; | 上下左右 の指定をします。 |
padding: | 10px 20px; | 上下・左右 の指定をします。 |
padding: | 10px 20px 30px; | 上・ 左右・下 の指定をします。 |
padding: | 10px 20px 30px 40px; | 上・右 ・下・左 の指定をします。 |
サンプル
[headの中]
<style type="text/css"><!--
select{
width: 300px;
height: 70px;
padding: 20px;
}
textarea{
width: 300px;
height: 40px;
padding-top: 20px;
padding-left: 40px;
}
input{
padding: 10px 20px;
}
-->
</style>
[bodyの中]
<form method="post" action="sample.html">select
<select name="sample" size="2">
<option value="サンプル-1">サンプル-1</option>
<option value="サンプル-2">サンプル-2</option>
<option value="サンプル-3">サンプル-3</option>
</select>
<input type="submit" value="送信する" />
textarea
<textarea cols="20" rows="2">
サンプル-1
サンプル-2
サンプル-3
</textarea>
<input type="submit" value="送信する" />
[ブラウザ上]