TOP ＞ マージン・パディング・ボーダー ＞ スタイルシートでマージンを設定する。
スタイルシートでマージンを設定する。
Webページのデザイン上、段落間の間を空ける際にbrタグなどを使うと、思うようなデザインが出来ないことがあります。 このようなときに、スタイルシートのマージンを使ってうまく設定しましょう。
マージンは上下左右を指定することが出来ます。値は”px”や”pt”のような数値やパーセントを使います。
マイナスの値も指定できますが、ブラウザによって動作が異なってきますので注意が必要です。 たいていのブラウザではボックスとボックスの間隔が詰まって表示されます。
CSS/スタイルシートでマージンを設定する。
【書き方】
margin-top:上マージンの値; margin-bottom:下マージンの値;
margin-left:左マージンの値; margin-right:右マージンの値;
"スタイルシートでマージンを設定する。"のサンプルはコチラをクリック
- サンプルページのコードは以下の通りです。
|
【スタイルシート】 body{margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; background-image: url(http://www.1css.net/img/box2.gif); } .c1{ margin-top: 20px; margin-bottom: 20px; margin-left: 30px; margin-right: 30px; background-color: #dddddd; } .c2{ margin-top: 10px; margin-bottom: 10px; margin-left: 0px; margin-right: 0px; background-color: #ffdddd; } 【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/401.css" type="text/css"> </head> <body> <p><font color="red">body要素のマージンを上下左右すべて0pxとしていますので、このように、ページの端々にテキストがぴったり引っ付いてしまいます。</font></p> <p class="c1">この段落では、上下のマージンをそれぞれ20px<br />左右を30pxに設定しています。</p> <p class="c2">この段落では、上下のマージンをそれぞれ10px<br />左右を0pxに設定しています。</p> <p class="c2">この段落も、上下のマージンをそれぞれ10px<br />左右を0pxに設定しています。</p> <p class="c1">この段落では、もう一度上下のマージンをそれぞれ20px<br />左右を30pxに設定しています。</p> </body> </html> |
[
マージン・パディング・ボーダー ]
