以下のCSSコードの通りhtml
、body
、header
、そして#headerList
全てにmargin:0; padding: 0;
を設定してあるのですが、ヘッダーの上に空白が出来てしまいます。
消すにはどうすれば良いですか?
html, body { padding: 0; margin: 0; font-family: "Avenir Next"; } header { padding: 0; margin: 0; } #headerList { text-align: center; background-color: rgb(79, 79, 79); transition: all 0.5s; margin: 0; paddng: 0; } #headerList li { display: inline-block; list-style-type: none; line-height: 50px; padding: 0 15px; color: white; } #headerList a { text-decoration: none; color: white; display: inline-block; margin: 0 10px; transition: all 0.3s; } #headerList a:hover { background-color: rgb(125, 125, 125); }
<body> <header> <nav id="headerList"> <ul> <li><a href="#">ホーム</a></li> <li><a href="#">サービス概要</a></li> <li><a href="#">マイリスト</a></li> <li><a href="#">マイページ</a></li> <li><a href="#">お問い合わせ</a></li> </ul> </nav> </header> <footer> </footer> </body>