【CSS】margin・paddingの初期値と解除方法

marginとpaddingは空白を調整するCSSです。

「marginやpaddingって最初から指定されているけど、何にいくつ指定されているの？それをリセットするにはどうするの？」

margin・paddingの初期値と解除方法を解説します。

初期値

【基本】初期値は0

marginとpaddingの初期値は基本的に0です。

ブラウザの初期値

ブラウザ側でhtmlタグごとに初期値が設定されています。

よく使うhtmlについては下記のとおりです。上 右 下 左の順で記載しています。

	margin	padding
body	8px 8px 8px 8px	0
div	0	0
p	16px 0 16px 0	0
ul	16px 0 16px 0	0 0 0 40px
li	0	0
table	0	0
td、th	0	1px 1px 1px 1px

body、p、ul、tdを使うときは要注意です。

いったん0を指定することをおススメします。

解除方法

0を指定する

margin・paddingの値を0にすると解除つまり、それらが指定されていないのと同じ状態にできます。

div{
    margin: 0;
    padding: 0;
}

ブラウザの初期値を解除するには下記のようにしましょう。

body,p,ul,td,th{
    margin: 0;
    padding: 0;
}

解除するとき「*」を使うと思わぬトラブルを招くことがあるため、必要なhtmlの必要なCSSだけ解除しましょう。

inheritを指定する

inheritは初期値を指定する値でどのCSSにも使うことができます。

IEでは効かないのですが、IEはもうほぼ使われないので気にしなくてもいいでしょう。

margin・paddingでは0を指定するのと同じ効果ですので、0かinherit好きな方を指定しましょう。

body,p,ul,td,th{
    margin: inherit;
    padding: inherit;
}

なお、ブラウザの初期値に戻す専用の値などはありませんので、下記のように任意の値を指定しましょう。

body{margin:8px}
p{margin:16px 0}
ul{margin:16px 0; padding-left:40px}
td,th{padding:1px}

【まとめ】margin・paddingの初期値と解除方法

marginとpaddingの初期値は基本的に0

ブラウザの初期値

body{margin:8px}
p{margin:16px 0}
ul{margin:16px 0; padding-left:40px}
td,th{padding:1px}

解除するには0かinheritを指定

以上、margin・paddingの初期値と解除方法でした。