Webサイトのmargin以外の空白
解決したいこと
HTML CSS JSを使ってwebサイトを作っている際に画面の上部に想定していない空白ができてしまいます。
Marginも0に設定していてChromeの検証ツールでは選択することができないような空白です。
何かしらわかる方がいればご回答よろしくお願いいたします。
発生している問題・エラー
エラーメッセージはなし
該当するソースコード
<header class="header">
<div class="header_logo">
<a href="">
<img src="image/logo.svg" alt="STARTLOGO">
</a>
</div>
<div class="header_nav">
<nav class="gnav">
<ul class="gnav_list">
<li class="gnav_item"><a class="gnav__link gnav__link--active" href="#">ホーム</a></li>
<li class="gnav_item"><a class="gnav__link" href="message.html">メッセージ</a></li>
<li class="gnav_item"><a class="gnav__link" href="campany.html">会社概要</a></li>
</ul>
</nav>
<button type="button" id="js-btn-menu" class="btn-menu">
<span class="btn-menu__line"></span>
</button>
</div>
</header>
該当するソースコード
html {
font-size: 62.5%; /* 16px * 62.5% = 10px */
width: 100%;
max-width: 1440px;
margin: 0 auto;
font-family: "Roboto", "Noto Sans JP", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}
a:hover {
opacity: 0.8;
}
.header {
display: flex;
flex-flow: wrap;
align-items: center;
justify-content: space-between;
height: 90px;
padding: 30px 70px;
}
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
@media screen and (max-width: 750px) {
.gnav {
display: none;
position: fixed;
top: 0;
right: 0;
z-index: 10;
width: 180px;
height: 100%;
background-color: #DD1B57;
box-shadow: -10px 0 35px -20px rgb(0 0 0 / 25%);
}
.gnav_list {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 180px;
padding: 90px 20px 20px 50px;
row-gap: 25px;
}
.gnav__link {
color: #fff;
}
.gnav__link:hover {
color: #fff;
}
.gnav__link--active {
opacity: 0.6;
}
.btn-menu {
display: flex;
position: absolute;
top: 0;
right: 0;
z-index: 100;
align-items: center;
justify-content: center;
width: 60px;
height: 60px;
text-align: center;
padding: 21px 16px;
border: none;
outline: none;
background: none;
background-color: #DD1B57;
cursor: pointer;
appearance: none;
}
.btn-menu__line {
display: block;
position: relative;
left: 0;
width: 100%;
height: 2px;
transition: all 0.4s;
border-radius: 4px;
background-color: #fff;
}
.btn-menu__line::before, .btn-menu__line::after {
display: block;
content: "";
position: absolute;
width: 100%;
height: 100%;
transition: inherit;
border-radius: 4px;
background-color: #fff;
}
.btn-menu__line::before {
top: -8px;
}
.btn-menu__line::after {
top: 8px;
}
.btn-menu.active .btn-menu__line {
background-color: transparent;
}
.btn-menu.active .btn-menu__line::before,
.btn-menu.active .btn-menu__line::after {
top: 0;
background-color: #fff;
}
.btn-menu.active .btn-menu__line::before {
transform: rotate(45deg);
}
.btn-menu.active .btn-menu__line::after {
transform: rotate(-45deg);
}
.header {
position: relative;
height: 60px;
padding: 20px;
margin: 0;
}
自分で試したこと
Google Chromeの検証ツールで該当部分にカーソルを合わせて原因を探ってみました。
また下記のサイトの練習なのでこちらにある完成されてコードと見比べましたが原因を見つけられませんでした。 https://webdesigner-go.com/coding-practice/beginner/
0 likes
