外側の余白を設定するときに使うmarginプロパティ

2015年6月21日

以前paddingプロパティを紹介しました。
あれはborderの内側の余白を設定するものでした。

今回紹介するのはborderより外側に余白を設ける
marginプロパティです。ボックスより外側になるので
コンテンツ領域に指定した背景は反映されることは
ありません。

marginに関わるプロパティ
margin-top 上の外側の余白を設定
margin-bottom 下の外側の余白を設定
margin-left 左の外側の余白を設定
margin-right 右の外側の余白を設定
margin 上記の4件をまとめて設定できます。
　　　　「上px 右px 下px 左px」と指定します。

設定値
auto 自動
数値　pxを付けて指定する。
%　割合を設定できますけど、どうやって使う？？

marginには負の値を設定できます。

コンテンツボックス内側の余白を設定するpaddingとは違い、
外側の余白を設定するmarginには負の値を設定できます。
例えば、margin-topに「-50px」を指定すると元の場所より
50px上に物が配置されます。

あれmarginが効かない？ってなってしまったら

margin:**pxを適用している親要素にoverflow:hidden;を
サンプルコードのように指定します。

コンテンツの幅を指定して中央揃えにする。

test.cssの4行目で入れ物の幅を指定し、14行目のように
書くことで中央揃えに指定できます。
これはもうお決まりのものだと思ってください。

    *{margin:0;padding:0;}
    
    #container{
        width:640px;
        height:640px;
        background-color:greenyellow;
        
        /*
        上記のwidth:960pxとセットで
        指定します。上下方向余白０
        左右に等間隔で余白を設けます。
        ブラウザサイズを最大にすると確認できます。
        */
        margin:0 auto;
        /*　親要素からはみ出す子要素は表示しない　*/
        overflow:hidden;
    }

    .box{
        width:100px;
        height:100px;
        background-color:aquamarine;
        
        /*　上辺外側の余白を設定　*/
        margin-top:50px;
        /*　下辺外側の余白を設定　*/
        margin-left:50px;
        
        /*　親要素からはみ出す子要素は表示しない　*/
        overflow:hidden;
    }
    
    .marginAllDir20px{
        /*　四方の外側の余白まとめてを設定　*/
        margin:20px;
    }

*{margin:0;padding:0;}

#container{

width:640px;

height:640px;

background-color:greenyellow;

上記のwidth:960pxとセットで

指定します。上下方向余白０

左右に等間隔で余白を設けます。

ブラウザサイズを最大にすると確認できます。

margin:0 auto;

/*　親要素からはみ出す子要素は表示しない　*/

overflow:hidden;

}

.box{

width:100px;

height:100px;

background-color:aquamarine;

/*　上辺外側の余白を設定　*/

margin-top:50px;

/*　下辺外側の余白を設定　*/

margin-left:50px;

/*　親要素からはみ出す子要素は表示しない　*/

overflow:hidden;

}

.marginAllDir20px{

/*　四方の外側の余白まとめてを設定　*/

margin:20px;

}

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>HTMLのメモ</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>

<div id="container">

    <div class="box">
        <p class="marginAllDir20px">test</p>
    </div>
    
</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>HTMLのメモ</title>

</head>

<body>

</div>

</body>

</html>