marginとpaddingの説明

【図解あり】marginとpaddingの違いを福岡一解りやすく説明します。

CSSを学ぶにあたって、理解不可欠なプロバティであるmarginとpaddingの違いを説明します。

大きな違いは要素(コンテンツ)の外側か内側の余白ということ

marginとpaddingの説明

簡単に図で説明すると、borderの外側に余白を取るのがmargin(図の薄紫の箇所)で、内側に余白を取るのがpadding(図の薄黄緑の箇所)です。CSS3から[ box-sizing ]プロパティが実装されたので[ width ]プロパティが２つあります。違いは下記で説明します。
覚え方ですが[ pad ]という語源は詰め物(パッド)という意味もあるので、要素の中に詰め物を入れるのがpadding、外側はmarginと覚えてください。

余白の指定方法

指定方法はmarginとpaddingにおいて共通です。それぞれ「top」「right」「bottom」「left」の個別指定ができ、要素に対して同時に設定できます。

.box{
	margin-top: 30px;
	margin-bottom: 20px;
	padding-top: 30px;
	padding-right: 30px;
	padding-bottom: 30px;
	padding-left: 30px;
}



上記の記述例では、上方向は30pxで下方向20pxの余白で、要素内はすべて30pxの余白を取る設定にしています。


ショートハンド指定


marginとpaddingともに、すべての方向の指定を一括できる「ショートハンド」という指定方法もあります。


.box{
	margin: 30px 0 20px 0; /* 上　右　下　左の順番で別々の値指定 */
	margin: 30px 0 20px; /* 上　左右　下　の順番で左右のみ同一の値指定 */
	padding: 30px 20px; /* 上下　左右　の順番でそれぞれ上下が同一の値、左右が同一の値指定 */
	padding: 30px; /* 上下左右　すべて同一の値指定 */
}



これは「上　右　下　左」を半角スペースで区切り一括で指定する方法です。ショートハンドより個別で指定するほうが優先されますので設定しているのにCSSが効かないときはどの要素が優先して適用されているかを調べて見てください。


[ box-sizing ]プロパティとは


box-sizing: border-box;

box-sizing プロパティとはボックスサイズ(width, height) の算出方法を指定する際に使用するプロパティです。






値
説明




content-box
padding と border の幅を要素の幅と高さに含めない。 デフォルト値




border-box
padding と border の幅を要素の幅と高さに含める。(CSS3から)






図で示した通り、box-sizing：content-box を指定した場合、width値にborderの幅とpaddingの値が反映されおらず


表示幅 = width + borderの幅 + paddingの幅


となり表示幅の計算が複雑となってしまいますが、box-sizing：border-box をしてした場合は


表示幅 = width = borderの幅 + paddingの幅 + コンテンツの幅（可変）


となり、borderとpaddingの幅が変更されたとしてもブラウザが計算してコンテンツの表示幅が変更され、絶対にwidth プロパティで指定した値を越えないので表示崩れが起きにくいです。


marginだけの特性


marginにはpaddingにはない複数の特性があります。この特性を理解できると思い通りの表示が可能になりますのでしっかり覚えましょう。


marginは縦方向で重なるmarginを値の大きほうを優先させる。(横方向はない)




marginとpaddingの説明


marginを設定していて、もっとも不可解な現象が起きるのがこの特性です。縦方向に接している要素同士のmarginを計測して合計ではなく値の大きなほうを優先させます。ですが横方向のmarginにおいては隣接している要素同士の合計が余白になるので注意してください。


マージンは負の値が使える


マージンは負の値が使える


.a{ margin-bottom: 30px; }
.b{ margin-top: 10px; }
.c{ margin-top: -10px;/* 10px分重なり合う */ }



marginには負の値が使用でき設定すると、負の値を指定した方向に近づきます。なので要素同士が重なったりすることが可能です。


マージンはautoが使える


左右に「auto」を指定すると、指定した要素が上位の要素の中央にレイアウトします。上下にも設定できますがその場合は位の要素にheightが設定されている場合のみとなります。


marginとpaddingの使い分け


marginとpaddingは余白作るということは一緒ですが、特性が違う以上、使いわけが必要となります。ですがバックグランンドカラー(background-color)を設定した場合は解りやすいですが、そうではない場合はどちらのプロパティでコーディングしたとしても見た目は同じようなデザインを作ることができます。なので、制作チーム毎にコーディングルールを設けることが重要となります。

Related articles