marginとpadding まとめ

要素の外側の余白を決めるプロパティ。値は『px』や『%』,『auto』などを取る。主に使用するのは『px』と『auto』。

記述例は以下。

p {
    margin-top: 20px;       /* 上の外側の余白を20pxで指定 */
    margin-right: 20px;     /* 右の外側の余白を20pxで指定 */
    margin-bottom: 20px; /* 下の外側の余白を20pxで指定 */
    margin-left: 20px;       /* 左の外側の余白を20pxで指定 */
}
 
div {
    margin: 20px;                        /* 上下左右の外側の余白を20pxで指定 */
    margin: 20px 10px;               /* 上下が20px,左右は10pxで外側の余白を指定 */
    margin: 20px 10px 5px;        /* 上が20px,左右が10px,下が5pxで外側の余白を指定 */
    margin: 20px 10px 5px 3px; /* 上が20px,右が10px,下が5px,左が3pxで外側の余白を指定 */ 
}

以下のように後述してmarginプロパティを記述すると上書きされる。

p {
    margin-top: 20px;
    margin-right: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
 
    margin: 200px; /* このように後述するとすべて200pxに上書きされます */
 
    /* これらを後述したことと同義です */
    /*
    margin-top: 200px;
    margin-right: 200px;
    margin-bottom: 200px;
    margin-left: 200px;
    */
}
 
div {
    /* 逆にこのパターンはmargin-leftのみ20pxとして上書きされます */
    margin: 100px;
    margin-left: 20px;
} 

基本的にインラインレベル要素は上下のマージンが効かず左右のマージンしか効かない。ただしimg要素などの置換要素は上下左右全てのマージンを指定することができる。

『auto』という値を取ると状況によって値が自動算出される。左右の値に『auto』を取ると左右均等分の余白が自動算出され、結果中央寄せの配置になる。

左側の値だけに『auto』と取ると右寄せになる。日本や英語のブラウザは左詰めでレイアウトされていくので右側の値だけ『auto』と取ることはめったにない。

値に『auto』と取る場合は必ず『width』の値を設定しなければならない。 『auto』の値が取れるのは左右のマージンのみ。上下は取れない。

インライン要素は左右に『auto』の値は取れない。インラインブロック要素を位置寄せしたい場合は『margin』プロパティではなく親要素に『text-align』プロパティを記述して実装する。

上下のマージンの相殺処理が存在する。左右のマージンの場合は相殺されない。 上下のマージンが重なった場合大きい方の数値がマージンとして反映される。

<!-- これは隙間のマージン60pxとしてレンダリングされます -->
<div style="width: 200px; height: 200px; background-color: red; margin-bottom: 40px;"></div>
<div style="width: 200px; height: 200px; background-color: aqua; margin-top: 60px;"></div> 

親子関係でも子要素が親要素を突き破る形で上下のマージンが相殺される。左右のマージンは相殺されない。こちらも大きい方の数値がマージンとして反映される。

<!-- これは上のマージン60pxとしてレンダリングされます -->
<div style="width: 200px; height: 200px; background-color: red; margin-top: 40px;">
    <div style="width: 100px; height: 100px; background-color: yellow; margin-top: 60px;"></div>
</div> 

親要素に『border』プロパティや『padding』プロパティが記述してあった場合は親子関係の上下のマージンの相殺は行われない。

marginの値はマイナスの数値をとれる。そうすると要素同士が重なってレイアウトされる。

要素の内側の余白を決めるプロパティ。値は『px』や『%』など。主に使用するのは『px』。

記述例は以下。

p {
    padding-top: 20px:        /* 上の内側の余白を20pxで指定 */
    padding-right: 20px;      /* 右の内側の余白を20pxで指定 */
    padding-bottom: 20px; /* 下の内側の余白を20pxで指定 */
    padding-left: 20px;        /* 左の内側の余白を20pxで指定 */
} 

以下のように後述してpaddingプロパティを記述すると上書きされる。

p {
    padding-top: 20px:
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
 
    padding: 200px; /* このように後述するとすべて200pxに上書きされます */
 
    /* これらを後述したことと同義です */
    /*
    padding-top: 200px;
    padding-right: 200px;
    padding-bottom: 200px;
    padding-left: 200px;
    */
}
 
div {
    /* 逆にこのパターンはpadding-leftのみ20pxとして上書きされます */
    padding: 100px;
    padding-left: 20px;
} 
 

要素の大きさはpaddingの値が加算されてレンダリングされる。

<!-- この場合の要素の大きさは横300px、縦300pxとしてレンダリングされる -->
<div style="width: 200px; height: 200px; background-color: aqua; padding: 50px;">ここはp要素だよ。paddingを50pxに指定しているよ</div>

paddingで追加された領域にも背景色や背景画像が反映される。

インラインレベル要素にも上下左右のpaddingを指定できるが、そのpaddingの大きさは親要素の高さを決定付ける数値として加算されず、親要素の大きさ以上のpaddingを設定した場合は親要素を突き破って表示される。

逆に子要素がブロックレベル要素だった場合は子要素のpaddingの大きさ分も親要素の高さに加算されて算出されるので突き破りという現象は起こらない。

<!-- この場合のdiv要素の高さはちゃんとpaddingを含めた子要素の高さとなる -->
<div style="background-color: aqua;">
    <div style="width: 200px; padding: 100px; background-color: purple; color: white;">ここはdiv要素だよ。paddingを100pxに設定しているよ</div>
</div>

img要素などの置換要素も子要素のpaddingの大きさ分も親要素の高さにしっかり加算されて算出される。

<!-- この場合もdiv要素の高さはちゃんとpaddingを含めた子要素の高さとなる -->
<div style="background-color: aqua;">
    <img src="hoge" style="width: 200px; height: auto; padding: 100px;">
</div>