css

ブラウザの余白

色付きのボックス要素をブラウザ画面いっぱいに表示したら、余白のようなものが表示されました。

ブラウザには余白が設定されているようで、今回はこの余白を表示しないようにします。

前提

以下のHTML、CSSを使用します。

HTML

<!doctype html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>sample</title>
  <link href="style.css" rel="stylesheet">
</head>

<body>
  <div class="container">
  </div>
</body>

</html>

CSS

.container {
  width: 100vw;
  height: 100vh;
  background-color: #99cc00;
}

なお、この状態だとブラウザに余白が表示されます。

ユニバーサルセレクタの利用

ユニバーサルセレクタ(*)はHTMLドキュメント内の全ての要素を意味しています。
全ての要素のマージン、パディングをなくしてしまえば余白は表示されなくなります。

/* ユニバーサルセレクタ */
* {
  margin: 0;
  padding: 0;
}

最後に

特にありません。

© DeNnie.Lab All Rights Reserved.