私はWeb開発を始めたばかりで、身体の余白を取り除くときに問題に遭遇しました。
ブラウザの最上部と「ロゴ」テキストの間にスペースがあります。そして、私のコードは ここではjsbin です。
body { margin: 0;}
スペースを削除したい場合は間違っていますか?
私はそれを使用すると言うでしょう:
* {
margin: 0;
padding: 0;
}
これを解決するのは悪い方法です。
親からh1マージンが飛び出す理由は、親にパディングがないためです。
H1の親要素にパディングを追加すると、マージンは親の内側になります。
allパディングとマージンを0にリセットすると、多くの副作用が発生する可能性があります。次に、この特定の見出しのmargin-topを削除することをお勧めします。
一部のHTML要素には事前にマージンが定義されています(つまり:body
、h1
からh6
、p
、fieldset
、form
、ul
、ol
、dl
、dir
、menu
、blockquote
およびdd
)。
あなたの場合、それはh1
問題の原因。 { margin: .67em }
デフォルトでは。 0に設定すると、スペースが削除されます。
このような一般的な問題を解決するには、ブラウザの dev tools を使用することをお勧めします。ほとんどのブラウザの場合:詳細を知りたい要素を右クリックして、[要素の検査]を選択します。 [スタイル]タブの一番下に、CSSボックスモデルがあります。これは、境界線、パディング、マージン、およびスタイリングの頭痛の原因となる要素を視覚化するための優れたツールです。
Cssを記述する前に、すべてのHTML要素をリセットすることをお勧めします。
* {
margin: 0;
padding: 0;
}
その後、問題なくカスタムcssを作成できます。
h1
タグにまだマージンがあります
したがって、次のように削除する必要があります。
h1 {
margin-top:0;
}
問題はh1
ヘッダーマージン。これを試す必要があります:
h1 {
margin-top:0;
}
これは、本体のマージンとデフォルトの上部マージン_<h1>
鬼ごっこ
body{
margin: 0px;
padding: 0px;
}
h1 {
margin-top: 0px;
}
Bodyまたは*を使用して、マージンとパディングを0pxにできます。
*{
margin: 0px;
padding:0px;
}
この質問に対する正しい答えは「css reset」です。
* {
margin: 0;
padding: 0;
}
ブラウザーに関係なく、ページ上のすべてのオブジェクトのデフォルトのマージンとパディングをすべて削除します。
BODY MARGINをゼロに設定しても、この問題が続くことがわかりました。
ただし、簡単な修正方法があります。以下に示すように、HEADERタグに1pxの境界線を設定し、BODY MARGINをゼロに設定するだけです。
body { margin:0px; }
header { border:1px black solid; }
HEADER div内にあるH1、H2などの要素のMARGINをゼロに変更する必要がある場合もあります。これにより、テキストの周りに表示される余分なスペースがなくなります。
なぜこれが機能するのかはわかりませんが、Chrome browserを使用します。明らかに、ヘッダーの色に合わせて境界線の色を変更することもできます。