html - CSS/HTML - 当我添加图像链接时自动在顶部添加填充？

Question

每当我链接图片时，它都会自动将内容降低一点。我希望它是 3 合 1 行并完美对齐。当您查看示例时，向下滚动，底部的 3 个是我想要的样子。

我的错误在哪里？

See it yourself here: http://thequizmania.com/2100-2/#

HTML

<div id="pagewrap">
<br>
<p style="text-align: center">Quiz yourself. It's all about you!</p>


<a href="#">
    <section id="content">
                <img src="http://thequizmania.com/wp-content/uploads/2015/09/01_quiz.png"/>
        <h3>What Kind Of Karma Do You Have?</h3>
    </section>
</a>
<a href="#">
    <section id="middle">
                <img src="http://thequizmania.com/wp-content/uploads/2015/09/01_quiz.png"/>
        <h3>What Kind Of Karma Do You Have?</h3>
    </section>
</a>
<a href="#">
    <aside id="sidebar">
                <img src="http://thequizmania.com/wp-content/uploads/2015/09/01_quiz.png"/>
        <h3>What Kind Of Karma Do You Have?</h3>
    </aside>
</a>

<a href="#">    
    <section id="content">
                <img src="http://thequizmania.com/wp-content/uploads/2015/09/01_quiz.png"/>
        <h3>What Kind Of Karma Do You Have?</h3>
    </section>
</a>
<a href="#">
    <section id="middle">
                <img src="http://i.imgur.com/QUuWywi.png" />
        <h3>What Color Is Your Personality?</h3>
    </section>
</a>
<a href="#">
    <section id="sidebar">
                <img src="http://thequizmania.com/wp-content/uploads/2015/09/01_quiz.png"/>
        <h3>What Kind Of Karma Do You Have?</h3>
    </section >
</a>

</div>

CSS

<style>
@import url(http://fonts.googleapis.com/css?family=Open+Sans);
#middle:hover {
background-color: #FFBFFF;
color: white;
} 

#sidebar:hover {
background-color: #FFBFFF;
color: white;
} 

#content:hover {
background-color: #FFBFFF;
color: white;
}
body { 
  font-family: 'Open Sans', sans-serif;
  color: #666;
}

/* STRUCTURE */

#pagewrap {
    padding: 0px;
    width: 960px;
    margin: auto;
}

#content {
    width: 265px;
    float: left;
    padding: 0px 0px;
border:thin #E4E4E4 solid;
transition:.3s;
}

#middle {
    width: 265px; /* Account for margins + border values */
    float: left;
    padding: 0px 0px;
    margin: 0px 5px 5px 5px;
border:thin #E4E4E4 solid;

}

#sidebar {
    width: 265px;
    padding: 0px 0px;
    float: left;
border:thin #E4E4E4 solid;

}
h2 {
padding:0px;
margin:0px;
}
/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* for 980px or less */
@media screen and (max-width: 980px) {

    #pagewrap {
        width: 94%;
    }
    #content {
        width: 41%;
        padding: 1% 4%;
    }

    #middle {
        width: 41%;
        padding: 1% 1%;
        margin: 0px 0px 5px 5px;
        float: right;
    }

    #sidebar {
        clear: both;
        padding: 1% 4%;
        width: auto;
        float: none;
    }


}

/* for 700px or less */
@media screen and (max-width: 650px) {

    #content {
        width: auto;
        float: none;
    }

    #middle {
        width: auto;
        float: none;
        margin-left: 0px;
    }

    #sidebar {
        width: auto;
        float: none;
    }

}

/* for 480px or less */
@media screen and (max-width: 480px) {

    header {
        height: auto;
    }
    h1 {
        font-size: 2em;
    }
    #sidebar {
        display: none;
    }

}


#content {
    background: white;
}
#middle { background: white; }
#sidebar {
    background: white;
}
#content, #middle, #sidebar {
    margin-bottom: 30px;
margin-right:50px;
text-align:center;
}
}
</style>

Answer 1

您问题中的 HTML 与您网站的源代码不同。在你的网站上，有一堆 <p>每个部分之间的标签具有默认边距，这会影响图像的对齐。

如果删除 <p>从您网站上的代码中提取标签，图像将再次正确对齐。

---

这是您网站的源代码片段，其中显示了所有额外的 <p>元素:

<p style="text-align: center">Quiz yourself. It&#8217;s all about you!</p>
<p><a href="#"></p>
<section id="content">
<img src="//thequizmania.com/wp-content/uploads/2015/09/01_quiz.png"/></p>
<h3>What Kind Of Karma Do You Have?</h3>
</section>
<p></a><br/>
<a href="#"></p>
<div id="middle">
<img src="//thequizmania.com/wp-content/uploads/2015/09/01_quiz.png"/></p>
<h3>What Kind Of Karma Do You Have?</h3>
</p></div>
<p></a><br/>