web-dev-qa-db-ja.com

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

私はWeb開発を始めたばかりで、身体の余白を取り除くときに問題に遭遇しました。

There's space between the very top and "logo" ブラウザの最上部と「ロゴ」テキストの間にスペースがあります。そして、私のコードは ここではjsbin です。

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

htmlcssmarginspace
22
piskebee

私はそれを使用すると言うでしょう：

* {
  margin: 0;
  padding: 0;
}

これを解決するのは悪い方法です。

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

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

allパディングとマージンを0にリセットすると、多くの副作用が発生する可能性があります。次に、この特定の見出しのmargin-topを削除することをお勧めします。

25
andeersg

一部のHTML要素には事前にマージンが定義されています（つまり：body、h1からh6、p、fieldset、form、ul、ol、dl、dir、menu、blockquoteおよびdd）。

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

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

6
Björn Helgeson

Cssを記述する前に、すべてのHTML要素をリセットすることをお勧めします。

* {
    margin: 0;
    padding: 0;
}

その後、問題なくカスタムcssを作成できます。

4
Spawn

h1タグにまだマージンがあります

したがって、次のように削除する必要があります。

h1 {
 margin-top:0;
}
2
CᴴᵁᴮᴮʸNᴵᴺᴶᴬ

問題はh1ヘッダーマージン。これを試す必要があります：

h1 {
 margin-top:0;
}
1
Rahul Tripathi

これは、本体のマージンとデフォルトの上部マージン_<h1> 鬼ごっこ

body{
        margin: 0px;
        padding: 0px;
    }

h1 {
        margin-top: 0px;
    }
1
Mladen Oršolić

Bodyまたは*を使用して、マージンとパディングを0pxにできます。

*{
margin: 0px;
padding:0px;
}
0
Vinayak

この質問に対する正しい答えは「css reset」です。

* {
    margin: 0;
    padding: 0;
}

ブラウザーに関係なく、ページ上のすべてのオブジェクトのデフォルトのマージンとパディングをすべて削除します。

0
Darian

BODY MARGINをゼロに設定しても、この問題が続くことがわかりました。

ただし、簡単な修正方法があります。以下に示すように、HEADERタグに1pxの境界線を設定し、BODY MARGINをゼロに設定するだけです。

body { margin:0px; }

header { border:1px black solid; }

HEADER div内にあるH1、H2などの要素のMARGINをゼロに変更する必要がある場合もあります。これにより、テキストの周りに表示される余分なスペースがなくなります。

なぜこれが機能するのかはわかりませんが、Chrome browserを使用します。明らかに、ヘッダーの色に合わせて境界線の色を変更することもできます。

0
wardheed