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