ボックスの外側の余白
marginプロパティ
マージン指定なし
(マージン１) 外側4方向に margin:20px;
(マージン２)
上下：10px； 左右：150px;
(マージン３) 上：30px； 左右：50px； 下：10px；
(マージン４) 上：10px； 右：20px； 下：30px； 左：100px；
(マージン５) width:300px; margin:0 auto;
(マージン６) margin-right: 50%;
マージンの相殺
ボックスが上下に並ぶ場合は、隣り合う垂直方向のマージン(margin-top、margin-bottom)は
値の大きい方のmarginプロパティ値が採用されます。上の例では
(マージン１)はmargin-bottom:20px; (マージン２)はmargin-top:10px;なので下:20pxが採用されます。
(マージン２)と (マージン３)では上:30pxになります。
マージン
|
ロリポップ！のドメインは選べる全８５種類！！
☆さくらのレンタルサーバ ビジネスプロ☆
サンプルソース
<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">(マージン１) 外側４方向にmargin:20px;</p>
<p id="mgn2">(マージン２) 上下:10px; 左右:150px;</p>
<p id="mgn3">(マージン３) 上:30px; 左右:50px; 下:10px;</p>
<p id="mgn4">(マージン４) 上:10px; 右:20px; 下:30px; 左:100px;</p>
<div id="Imgn">
<img src="koaras.jpg" border="0" width="160" height="120" alt="">
</div>
<p id="mgn5">(マージン５) width:300px; margin：0 auto;</p>
<p id="mgn6">(マージン６) margin-right:50%;</p>
</div>
</body>
</html>margin プロパティ
ボックスの外側の余白（マージン）の値を一括して指定します。- 数値＋"px"や"em"等の単位。
- 親要素の幅に対しての割合は%値で。 ※上記サンプル、 (マージン６)
- "auto"を指定すると自動的に設定されます。※上記サンプル、 (マージン５)
- 値が１つ
margin: 10px;(上下左右) のマージン - 値が２つ
margin: 10px 150px;(上下) (左右) のマージン - 値が３つ
margin: 10px 50px 20px;(上) (左右) (下) のマージン - 値が４つ
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 プロパティ
ロリポップ！のドメインは選べる全８５種類！！
☆さくらのレンタルサーバ ビジネスプロ☆
