2011年10月28日

margin プロパティ

スポンサード リンク

 ボックスの外側の余白
marginプロパティ

マージン指定なし

(マージン1) 外側4方向に margin:20px;

(マージン2)
 上下:10px; 左右:150px;

(マージン3) 上:30px; 左右:50px; 下:10px;

(マージン4) 上:10px; 右:20px; 下:30px; 左:100px;

(マージン5) width:300px; margin:0 auto;

(マージン6) margin-right: 50%;

マージンの相殺
ボックスが上下に並ぶ場合は、隣り合う垂直方向のマージン(margin-top、margin-bottom)
値の大きい方のmarginプロパティ値が採用されます。上の例では
(マージン1)はmargin-bottom:20px; (マージン2)はmargin-top:10px;なので下:20pxが採用されます。
(マージン2)と (マージン3)では上:30pxになります。

 マージン
   パディング              ボーダー↑
要素の内容領域
↓ボーダー        パディング  
マージン

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ

サンプルソース

<html>
 <head>
<title>margin プロパティ</title>
 <style type="text/css">
  <!--
        #oyaDiv{
          background-color: #fffacd;
          width: 560px;
              }
        #oyaDiv p{
          background-color: pink; 
          text-align: center;/*テキストや画像などの水平方向の位置*/
          padding: 2px;/*領域内側の余白*/
               }
        #mgn1{
          margin: 20px; /*(上下左右)のマージン */
               }
        #mgn2{
          margin: 10px 150px;/*(上下)(左右)のマージン */
               }
        #mgn3{
          margin: 30px 50px 10px;/*(上)(左右)(下)のマージン */
               }
        #mgn4{
          margin: 10px 20px 30px 100px;/*(上)(右)(下)(左)のマージン*/ 
               }
        #mgn5{
         width:300px; /* ボックスの中央揃え */
         margin:0 auto;
               }
        #mgn6{ /* 値にパーセント */
         margin-right: 50%;
               }
        #Imgn{ /* 画像の中央配置 */
          position: relative;   
          left: 50%; /*画像の左辺の位置*/ 
          width: 160px; /*画像横幅*/
          margin-left: -80px; /* 画像横幅の1/2の値 */ 
          margin-bottom:10px; 
                }
-->
</style>

</head>
<body>
  <div id="oyaDiv">
<p>マージン指定なし</p>
<p id="mgn1">(マージン1) 外側4方向にmargin:20px;</p>
<p id="mgn2">(マージン2) 上下:10px; 左右:150px;</p>
<p id="mgn3">(マージン3) 上:30px; 左右:50px; 下:10px;</p> 
<p id="mgn4">(マージン4) 上:10px; 右:20px; 下:30px; 左:100px;</p>
    <div id="Imgn">
     <img src="koaras.jpg" border="0" width="160" height="120" alt="">
    </div>
<p id="mgn5">(マージン5) width:300px; margin:0 auto;</p>
<p id="mgn6">(マージン6) margin-right:50%;</p>
  </div>
</body>
</html>
margin プロパティ
 ボックスの外側の余白(マージン)の値を一括して指定します。
  • 数値+"px"や"em"等の単位。
  • 親要素の幅に対しての割合は%値で。 ※上記サンプル、 (マージン6)
  • "auto"を指定すると自動的に設定されます。※上記サンプル、 (マージン5)
複数の値を指定する場合は半角スペースで区切ってを記述します。
  • 値が1つ margin: 10px;   (上下左右) のマージン
  • 値が2つ margin: 10px 150px;  (上下) (左右) のマージン
  • 値が3つ margin: 10px 50px 20px;  (上) (左右) (下) のマージン
  • 値が4つ margin: 10px 20px 30px 50px;  (上) (右) (下) (左) のマージン
margin-top,right,bottom,leftプロパティ
上・右・下・左 のマージンを個別に設定
  • margin-top: 10px;     上辺のマー ジンを設定
  • margin-right: 20px;     右辺のマージンを設定
  • margin-bottom: 30px;   下辺のマージンを設定
  • margin-left: 40px;         左辺のマージンを設定
マージンの相殺
垂直に隣接するボックスのマージン値が "プラス"だけあるいは"マイナス"だけの場合は
絶対値の大きい方の値が採用されます。 正、負 が混在する場合
(上のボックス margin-bottom:-30px; 下のボックス margin-top: 70px;)は
相殺されず、-30px+70px= 40px がマージン値になります。
margin:auto;
margin:auto;はブロック要素のボックスを中央揃え(センタリング)にする場合に
よく利用します。ボックスの横幅を指定し、左右両辺のマージンを
auto(margin-left: auto; margin-right: auto;)にすると
左右に等しいマージンが算出され、左右中央に配置されます。
しかし IE の後方互換モードでは margin:auto;  が
効かないためセンタリングできません。
IE に対応させるためには text-align : center;を使います。
marginプロパティ 負の値
 marginプロパティにはネガティブマージン(マイナスの値)を使用することができます。
これを利用して上記サンプルの画像を中央揃えにしてみました。
 画像を<div id="Imgn>で括ります。
#Imgn{ position: relative; // 相対配置にして
 left: 50%; // 親要素の幅の50% 左に配置します。画像の左辺が親要素の中央にきます。
 width: 160px; // 画像横幅
  margin-left: -80px;// 画像横幅の1/2の負の値を指定して左に寄せ画像中心を親要素の             横中央に持ってきます。   }

text-align プロパティ css
borderプロパティ css
border-styleプロパティ; ボーダーのスタイルの設定
border-radiusプロパティ 角丸ボーダー
paddingプロパティ ボックスの内側の余白
CSS positionプロパティ
回り込み、floatプロパティ/ 回り込み解除、clearプロパティ
visibilityプロパティ 領域の表示、非表示
display プロパティ
ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ

posted by javaScript at 20:46 | 大阪 ☁ | ボックス | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。