A.T-MOON

contents

パンくずリスト

メッセージエリア



    BOXの外側の余白を指定

メッセージエリア

マーク BOXの外側の余白を指定 margin:A;

 埋め込み: {margin:A}
 インライン: <○○ style="margin:A;">ここに文字</○○>


margin属性を使ってBOXの枠の外側の余白を指定します。
Aには、余白の幅をpx(ピクセル)%(パーセント)autoで指定します。
一括指定なので上下左右全ての余白が同じように設定されますが
%(パーセント)で指定した場合は指定されたBOXを含んだBOXの横幅に対する割合となりますので注意して下さい。
上下の余白も横幅を参照しての割合となります。

また、数値の変わりにautoを記述した場合は、自動調節となりセンタリングされます。

※例)
これが埋め込みスタイルシートで指定した
外側の余白が30pxのBOXです
border-styleはridge、border-widthはthinです
忘れずに線の種類を指定しないと線が出ませんよ

これがインラインスタイルシートで指定した
外側の余白が50pxのBOXです。
border-styleはinset、border-widthはmediumです
忘れずに線の種類を指定しないと線が出ませんよ
<html>
 <head>
 <style type="text/css">
 <!--

 .sample_box5{
  margin: 30px;
  border-style: ridge;
  border-width: thin;
  }
 -->
 </style>
  <title>ココにタイトル</title>
 </head>
 <body>
  <font color=red>※例</font>
  <div class="sample_box5">
  これが埋め込みスタイルシートで指定した<br>
  外側の余白が30pxのBOXです<br>
  border-styleはridge、border-widthはthinです<br>
  忘れずに線の種類を指定しないと線が出ませんよ <br>
  </div>

 <br>
  <div style="margin:50px; border-style: inset; border-width: medium;">
 これがインラインスタイルシートで指定した<br>
 外側の余白が50pxのBOXです<br>
 </div>

 </body>
</html>

まずは埋め込みスタイルシートです。
要素名を付けましょう。ここではsample_box5と名付けました。
セレクタの種類の所で説明しましたが
クラスセレクタはひとつの文章内で重複して使用することができますが
IDセレクタはひとつの文章内で重複して使用することはできません。
よってここではクラスセレクタを使用します。
埋め込みスタイルシート内のsample_box5でBOXの外側の余白を指定をします。
この時枠線の種類を忘れず指定しましょう。記述しないとデフォルトが適用され、枠線が表示されません。
body内の表示したい所に範囲を指定して記述します。(範囲の指定はコチラ→範囲の指定

次にインラインスタイルシートです。
body内の表示したい所に範囲を指定して記述するのは同じなのですが、指定範囲に直接、styleの記述します。
<style="">という形で記述していきます。
それぞれのプロパティを;(半角セミコロン)で区切って記述します。

ページTOP

マーク BOXの外側の余白を個別に指定 margin-A:B

 埋め込み: {margin-A:B}
 インライン: <○○ style="margin-A:B">ここに文字</○○>


margin属性を使ってBOXの枠の外側の余白を個別に指定します。
Aにはどこの余白を指定するのかを記述します。それぞれtopbottomleftrightで指定します。
Bには、余白の幅をpx(ピクセル)%(パーセント)で指定します。

応用編
位置の指定をせず{margin:,;}とした場合は☆に入る数値は上下に反映し、★は左右に反映します。
また{margin:,,;}とした場合は☆に入る数値は上に反映し、★は左右に反映し、○は下に反映します。
さらに{margin:,,,;}とした場合は☆に入る数値は上に反映し、★は右、○は下、●は左に反映します。

A ラインの指定
top
bottom
left
right

※例)
これが埋め込みスタイルシートで指定した
左外側の余白が50pxのBOXです
border-styleはridge、border-widthはthickです
忘れずに線の種類を指定しないと線が出ませんよ

これがインラインスタイルシートで指定した
右外側の余白が50pxのBOXです
border-styleはinset、border-widthはmediumです
忘れずに線の種類を指定しないと線が出ませんよ
<html>
 <head>
 <style type="text/css">
 <!--

 .sample_box6{
  margin-left: 50px;
  border-style: ridge;
  border-width: thick;
  }
 -->
 </style>
  <title>ココにタイトル</title>
 </head>
 <body>
  <font color=red>※例</font>
  <div class="sample_box6">
  これが埋め込みスタイルシートで指定した<br>
  左外側の余白が50pxのBOXです<br>
  border-styleはridge、border-widthはthickです<br>
  忘れずに線の種類を指定しないと線が出ませんよ<br>
  </div>

 <br>
  <div style="margin-right: 50px; border-style: inset; border-width: medium;">
 これがインラインスタイルシートで指定したBOXです
 </div>

 </body>
</html>

まずは埋め込みスタイルシートです。
要素名を付けましょう。ここではsample_box6と名付けました。
セレクタの種類の所で説明しましたが
クラスセレクタはひとつの文章内で重複して使用することができますが
IDセレクタはひとつの文章内で重複して使用することはできません。
よってここではクラスセレクタを使用します。
埋め込みスタイルシート内のsample_box6で枠の外側の余白を個別で指定をします。
この時枠線の種類を忘れず指定しましょう。記述しないとデフォルトが適用され、枠線が表示されません。
body内の表示したい所に範囲を指定して記述します。(範囲の指定はコチラ→範囲の指定

次にインラインスタイルシートです。
body内の表示したい所に範囲を指定して記述するのは同じなのですが、指定範囲に直接、styleの記述します。
<style="">という形で記述していきます。
それぞれのプロパティを;(半角セミコロン)で区切って記述します。

ページTOP

BOXの枠の太さの指定 BOXの内側の余白を指定