HTML: MarginとPaddingの使い分け

Webサイト内には、様々なセクションがあり、それぞれ中央に配置する機会が多くあります。テキストや画像を中央に配置するには様々な方法がありますがシンプルな二つを紹介します。

Margin (マージン)

1. marginは要素の外側の余白を作る
2. marginは幅に影響し、再度、計算しなければならない
3. 背景を指定してある場合はmarginの幅の部分だけ全体の幅が大きくなる

• 

HTML

<div class="margin-box">
<h2>margin</h2>
<p>Lorem ipsum.......</p>
</div>

CSS

.margin-box{
            background-color : #d0e1db ;
            width : 100% ;
            margin-left : 2% ;
            margin-right : 2% ;
            }

パラグラフの中にテキストとイメージを入れた場合、隣あったmarginは打ち消され一方だけが残る。

HTML

<div class="margin-box">
    <h2>margin</h2>
    <p>Lorem ipsum.......</p>
    <img "src = img / 1.jpg">
</div>

CSS

.margin-box {
            background-color : #d0e1db ;
	    width : 100% ;
            clear : both ;
			}
						
.margin-box p{
            width : 70% ;
            margin-left : 2% ;
            margin-right : 2% ;
            float : left ;
            }
						
.margin-box img{
                width : 30% ;
                margin-left : 2% ;
                margin-right : 2% ;
                float : left ;
                }

Padding (パディング)

1. Paddingは要素の内側の余白
2. 幅に影響は無し、最初の指定通り計算の必要無し
3. 背景を指定してある場合はpaddingの幅も色が塗られる

HTML

<div class="padding-box">
 <h2>padding</h2>
 <p>Lorem ipsum.......</p>
</div>

CSS

.padding-box{
            background-color : #d0e1db ;
            width : 100% ;
            padding-left : 2% ;
            padding-right : 2% ;
            }

要素の中にテキストとイメージを入れた場合、それぞれのpaddingの幅だけギャップが増え、テキスト70%とイメージ30%は自動的に計算されて枠内にフィットされる。