CSSで、指定されていない空白が開く

質問

ヘッダーのロゴとその下のナビゲーションの間に、勝手に空白が空きます。
margin: 0;と設定しても空白が空きます。

section#header {
width:80%;
height: 63px;
margin-right: auto;
margin-left: auto;
}

img.LOGO {
width: 700px;
height: 63px;
float: left;
}

p.intro {
color: #383838;
float: right;
font-size: 120%;
}

section#links {
font-size: 130%;
width: 90%;
height: 40px;
margin-bottom: 40px;
margin-right: auto;
margin-left : auto;
}

nav ul li {
display: block;
float: left;
width: 18%;
height: 40px;
margin-left: 1px;
margin-right: 1px;
border-left: #000000 2px solid;
border-right: #000000 2px solid;
}

nav ul li a {
display: block;
line-height: 40px;
width: 100%;
height: 100%;
text-decoration: none;
text-align: center;
}

div#clear {
clear:both;
}

CSSは以上の通り書きました。
このとき、section#headerで設定した、img#LOGOとp.introを含むヘッダー部分と、
section#linksで設定したナビゲーション部分に間が空いてしまいます。
どうすれば開かなくなるでしょうか。
閲覧環境はChromeです。

回答No.1

banban110 · ベストアンサー

chromeの開発者モードで該当箇所をみて空白が入っている原因を調べてみるのはいかがでしょうか？

お礼

回答ありがとうございます。
開発者モードで見たところ、user agent cssとbrタグが原因でした。
思い通りに行きそうでよかったです。ありがとうございました

回答No.2

okafukutarou

回答者1の方のコメントを少し補足。

空間が出来てしまう要素を右クリックして、「検証」を選択。
詳しくはこちらで。

https://ferret-plus.com/1880

お礼

補足ありがとうございます。
開発者モードで見たところ、brとuser agent cssが原因でした。
リセットCSSを入れたら思い通りになりました。本当にありがとうございました