ヘッダーは説明できない高さを持っています

Question

私の理由は分かりませんが、私のh3は巨大な高さを持っているようですが、私は何かマージンやパディング私はh3の上に置いた、それは常にnavのどこにある画像の背景の上のどこかにあるだろうか？

HTML

<header> 
<div class="fixed"> 
    <h1>Title</h1> 
    <nav id="menu"> 
     <ul> 
      <li><a href="../index.html">Home</a></li> 
      <li><a href="work/index.html">Portfolio</a></li> 
      <li><a href="travel/index.html">Blog</a></li> 
      <li><a href="#contact">Contact</a></li> 
     </ul> 
    </nav> 
</div> 

    <div class="picture"> 
     <h2>Text</h2> 
     <h2 class="name">Betti</h2> 
    </div> 
</header> 

<main> 

    <h3>Website Project</h3> 
    <p>coded in HTML &amp; CSS</p> 

    <div class="project"> 
     <a href="../project1/index.html" target="_blank"> 
     <img class="box" id="project1" src="../project1/img/project1.jpg" alt="project1"></a> 
    </div> 

CSS

.fixed{ 
position: fixed; 
background-color: white; 
top: 0px; 
left: 0px; 
width: 100%; 
border-bottom: dashed; 
border-color: #666666; 
} 

.picture{ 
background: url("../img/london.jpg") no-repeat; 
background-size: 100%; 
margin-top: 0%; 
width: 100%; 
float: left; 
border-left: solid #a5053d; 
border-width: 15px; 
} 

h1{ 
padding: 1% 0 0 4%; 
text-transform: uppercase; 
float: left; 
left: 0; 
} 

h2{ 
padding: 0 4%; 
color: white; 
float: left; 
margin-top: 3%; 
} 

h3{ 
text-transform: uppercase; 
font-size: 50px; 
text-align: center; 
margin-bottom: -20px; 
margin-top: 0; 
} 

#project1, #project2{ 
margin-top: 0px; 
margin-left: 20%; 
margin-right: auto; 
width: 60%; 
text-align: center; 
border: 1.9px solid #a5053d; 
margin-bottom: 4%; 
} 

.project{ 
clear: both; 
float: none; 
overflow: none; 
position: center; 
width: 100%; 
} 

Answer 1

あなただけmainを取っていることのスペースを見ています。それ以前の要素であるheaderが子供を浮かせているため、headerにはクリアフィックスがないため、その領域をすべて消費しています。したがって、mainは技術的にはheaderが終了しますが、子どもの下にはheaderで始まります。

headerで浮動小数点数をクリアすると、mainは表示されず、実際にはheaderのどこかで始まります。私はoverflow: auto;をheaderに追加しましたが、フロートをクリアする他の方法もあります。 http://codepen.io/anon/pen/EZbmKV

header { 
 
    overflow: auto; 
 
} 
 

 
.fixed{ 
 
position: fixed; 
 
background-color: white; 
 
top: 0px; 
 
left: 0px; 
 
width: 100%; 
 
border-bottom: dashed; 
 
border-color: #666666; 
 
} 
 

 
.picture{ 
 
background: url("../img/london.jpg") no-repeat; 
 
background-size: 100%; 
 
margin-top: 0%; 
 
width: 100%; 
 
float: left; 
 
border-left: solid #a5053d; 
 
border-width: 15px; 
 
} 
 

 
h1{ 
 
padding: 1% 0 0 4%; 
 
text-transform: uppercase; 
 
float: left; 
 
left: 0; 
 
} 
 

 
h2{ 
 
padding: 0 4%; 
 
color: white; 
 
float: left; 
 
margin-top: 3%; 
 
} 
 

 
h3{ 
 
text-transform: uppercase; 
 
font-size: 50px; 
 
text-align: center; 
 
margin-bottom: -20px; 
 
margin-top: 0; 
 
} 
 

 
#project1, #project2{ 
 
margin-top: 0px; 
 
margin-left: 20%; 
 
margin-right: auto; 
 
width: 60%; 
 
text-align: center; 
 
border: 1.9px solid #a5053d; 
 
margin-bottom: 4%; 
 
} 
 

 
.project{ 
 
clear: both; 
 
float: none; 
 
overflow: none; 
 
position: center; 
 
width: 100%; 
 
}

<header> 
 
<div class="fixed"> 
 
    <h1>Title</h1> 
 
    <nav id="menu"> 
 
     <ul> 
 
      <li><a href="../index.html">Home</a></li> 
 
      <li><a href="work/index.html">Portfolio</a></li> 
 
      <li><a href="travel/index.html">Blog</a></li> 
 
      <li><a href="#contact">Contact</a></li> 
 
     </ul> 
 
    </nav> 
 
</div> 
 

 
    <div class="picture"> 
 
     <h2>Text</h2> 
 
     <h2 class="name">Betti</h2> 
 
    </div> 
 
</header> 
 

 
<main> 
 

 
    <h3>Website Project</h3> 
 
    <p>coded in HTML &amp; CSS</p> 
 

 
    <div class="project"> 
 
     <a href="../project1/index.html" target="_blank"> 
 
     <img class="box" id="project1" src="../project1/img/project1.jpg" alt="project1"></a> 
 
    </div>