TOP ＞ マージン・パディング・ボーダー ＞ パディングをまとめて設定する。
パディングをまとめて設定する。
スタイルシートでパディングを設定するでは、 マージンを上下左右を指定する方法を述べました。しかし、4方向のマージンをいちいち設定せずに、まとめて指定してしまうことができます。
4方向のパディングをまとめて設定する場合、paddingプロパティを使用します。
paddingプロパティには値を1～4個指定できます。以下の表のようにすることで、長かったマージンの指定部分を省略できます。
marginプロパティに指定できる値の数と意味
| 値の数 | 意味 |
| 1 | 上下左右に同じ幅のパディングを設定する |
| 2 | 一つ目は上下、二つ目で左右のパディングを設定 |
| 3 | 一つ目は上、二つ目で左右、三つ目で下のパディングを設定 |
| 4 | 上、右、下、左の時計回りの順にパディングを設定 |
パディングをまとめて設定する。
【書き方】
padding : 値･･･値;
"パディングをまとめて設定する。"のサンプルはコチラをクリック
- サンプルページのコードは以下の通りです。
|
【スタイルシート】 body{margin: 0px; background-image: url(http://www.1css.net/img/box2.gif); } .c1{ margin: 20px; padding: 10px; background-color: #dddddd; } .c2{ margin: 10px 50px; padding: 5px 10px; background-color: #ffdddd; } .c3{ margin: 10px 30px 50px; padding: 5px 10px 20px; background-color: #ddffdd; } .c4{ margin: 0px 10px 30px 50px; padding: 5px 10px 20px 30px; background-color: #ddddff; } 【HTML本文】 <html> <head> <title>マージンをまとめて設定する。のサンプル</title> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" href="http://www.1css.net/sample/404.css" type="text/css"> </head> <body> <p><font color="red">body要素のマージンを上下左右すべて0pxとしていますので、このように、ページの端々にテキストがぴったり引っ付いてしまいます。</font></p> <p class="c1">この段落では、上下左右のマージンを全部20pxに設定して、<br />さらに上下左右のパディングを10pxに設定しています。</p> <p class="c2">この段落では、マージンを上下を10px、左右を50pxに設定して、<br />さらに上下のパディングを5px、左右のパディングを10pxに設定しています。</p> <p class="c3">この段落では、マージン上を10px、左右を30px、下を50pxに設定して、<br />さらに上のパディングを5px、左右を10px、下を20pxに設定しています。</p> <p class="c4">この段落では、マージンを上を0px、右を10px、下を30px、左を50pxに設定して、<br />さらに、上のパディングを5px、右を10px、下を20px、左を30pxに設定しています。</p> </body> </html> |
[
マージン・パディング・ボーダー ]
