css - DIV 間にギャップがあるのはなぜですか?

Question

私が取り組んでいるこのウェブサイトにギャップがあるのはなぜですか? マージン、パディングなどを 0px に設定しようとしましたが、何も影響していないようです。

編集 - 謝罪; ウェブサイトへのリンクをめちゃくちゃにしました。これは修正されました。

Answer 1

忘れてしまったスタイルを挿入した可能性があります。写真から判断すると、あなたのhtmlは次のようになります。

<ul id="nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Gallery</a></li>
</ul>

<div id="something">
</div>

ナビゲーションリンクまたはリストアイテムは5pxのマージンがあるように見え、divは20pxの上下のマージンがあるように見えます。トラブルシューティングのために修正しようとしている要素にこれを追加してみてください。

margin: 0 !important;
padding: 0 !important;
border: 0 !important; 

これは、競合する可能性のある先行するcssスタイルをオーバーライドする必要があります。それが機能しない場合は、さらにトラブルシューティングに役立つコードを確認する必要があります。

[更新]単にhtmlタグを付けるのではなく、DOCTYPEを宣言する必要があります。センタータグは非推奨になりました。

間隔を修正するには、次のことを試してください。

#nav ul{
    list-style-type:none;
    margin:0;
    padding:0;    
    /* REMOVE
    padding-top:6px;
    padding-bottom:6px;  
    */
}  
/***********************************
-- ADD
***********************************/
hr {
    margin: 0;
}
h2 {
    margin: 0;
}

パディングとマージンを0に変更しましたが、ulに再度追加しました。hrタグが間隔の一部を引き起こし、headingタグが残りを引き起こしていました。

Answer 2

HR (行) と H2 (ホーム タイトル) はデフォルトでブロック要素であり、改行と余白があります。これらの要素の余白を変更するか、表示をインライン (display:inline) に設定する必要があります。

Answer 3

ボーダーの幅をゼロにする

style="border:0px" 

または境界線であるかどうかを確認するために色を付けます

style="border-color:red"

Answer 4

また試してください：

    border-collapse: collapse;
    border: 0;