CSS:本文の余白を削除する

Question

私は Web 開発が初めてなので、本文の余白を削除するのに苦労しています。

ブラウザの最上部と「ロゴ」テキストの間にはスペースがあります。私のコードはjsbinにあります。

スペースを削除したい場合は、 body { margin: 0;} 間違っていますか？

Answer 1

特定の HTML 要素には事前定義されたマージンがあります (例: body、h1 から h6、p、 >fieldset、form、ul、ol、dl、dir >、menu、blockquote および dd)。

あなたの場合、問題の原因は h1 です。デフォルトでは { margin: .67em } です。 0 に設定すると、スペースが削除されます。

このような問題を解決するには、ブラウザの 開発ツール を使用することをお勧めします。ほとんどのブラウザの場合: 詳細を確認したい要素を右クリックし、[要素の検査] を選択します。 [スタイル] タブの一番下に、CSS ボックス モデルがあります。これは、境界線、パディング、マージン、およびスタイルの問題の原因となっている要素を視覚化するための優れたツールです。

Answer 2

この問題を解決するには、グローバル リセットを使用するのはひどい方法だと思います。

リーリー

h1 マージンが親から飛び出す理由は、親にパディングがないためです。

h1 の親要素にパディングを追加すると、マージンは親要素の内側になります。

すべての パディングとマージンを 0 にリセットすると、多くの副作用が発生する可能性があります。その場合は、そのタイトルの余白を削除した方がよいでしょう。