前提・実現したいこと
HTMLでWebページ上部のナビゲーションを作成しているのですが、以下のCSSのコードのようにページ全体のmarginやpaddingを0pxに設定しているにも関わらずページ最上部に余白ができてしまいます。これを消すにはどうしたらよいのでしょうか。
発生している問題・エラーメッセージ
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 4<head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initiai-scale=1,shrink-to-fit=no"> 7 <title>タイトル</title> 8 9</head> 10 11<body> 12 <!-- ナビゲーション --> 13 <nav> 14 <ul> 15 <li><a href=”#”>TOP</a></li> 16 <li><a href=”#”>ABOUT</a></li> 17 <li><a href=”#”>MENU1</a></li> 18 <li><a href=”#”>MENU2</a></li> 19 <li> <a href=”#”>CONTACT</a></li> 20 </ul> 21 </nav> 22 <!-- ページ概要 --> 23 <header> 24 <div class="about"> 25 <h1>ページ概要</h1> 26 <img src="~"> 27 <p class="lead">ページ説明 28 <br>ページ説明</p> 29 </div> 30 </header>
CSS
1* { 2 padding: 0px; 3 margin: 0px; 4} 5 6nav { 7 text-align: center; 8 background-color: #ffff01; 9} 10 11nav ul { 12 margin: 0 ; 13 padding: 0 ; 14} 15 16nav ul li{ 17 list-style: none; 18 display: inline-block; 19 width: 10%; 20} 21 22nav ul li a { 23 text-decoration: none; 24 color: #333; 25} 26 27nav li:hover{ 28 border-bottom: 2px solid #FF7A37; 29} 30 31header { 32 text-align: center; 33} 34 35header p{ 36 font-size: 1.3em; 37} 38
試したこと
補足情報(FW/ツールのバージョンなど)
回答2件
あなたの回答
tips
プレビュー