Question

我不知道为什么，但是我的h3似乎有一个很大的高度，我在页面下方还有第二个h3，这根本没有这个问题，无论我设置什么边距或填充在h3的顶部，它总是在图片背景之上的某处，导航是在哪里？

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没有一个clearfix。因此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>

标题有无法解释的高度

1 个答案: