cssのbackgroundに隙間ができるのは、デフォルト値が原因

こんにちは tanaka です。

バックグラウンドが
左、上に
ぴったりくっつかず隙間ができる。

そんなことありませんか?

原因の1つとして
padding、marginの
デフォルト値が邪魔している
可能性があります。

解決策の1つとして
セレクタ(アスタリスク)を
使うと良いでしょう。

* {
margin: 0;
padding: 0;
}

それでは説明していきます。

* {
margin: 0;
padding: 0;
}

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

なぜそうなるのか?

ブラウザの初期値が原因

padding、marginには
ブラウザの初期値が入っています。

それにより、
設定した覚えのないところで
奇妙な隙間ができる時があります。

画像blog-back03-01

どうすればいいのか

セレクタ(アスタリスク)を使って値を初期化

普通、
デフォルト値といえば、
0(ゼロ)が入っている
と思います。

しかし、
paddingやmarginには
0ではない数値が
入っています。

なので、
html要素全てに有効となるセレクタ
アスタリスクを使って

プロパティの値を
統一しましょう。

* {
margin: 0;
padding: 0;
}
画像blog-back03-02

まとめ

奇妙な隙間

padding、marginなどプロパティには
ブラウザの初期値が(0以外の値も)
入っている。

それにより、
設定した覚えのない
奇妙な隙間ができる時がある。

解決策

解決策として

あらかじめ
セレクタ(アスタリスク)で
html要素全てに対し設定する
方法がある。

<やり方>

* {
margin: 0;
padding: 0;
}

* {
margin: 0;
padding: 0;
}

cssの初期化について
記事を用意しました。
よければご覧ください。

以上、
cssのbackgroundに隙間ができるのは、デフォルト値が原因
の説明でした。

ありがとうございました。

タイトルとURLをコピーしました