徽标推送我的主要内容，尽管它是自己的标签

Question

我正在尝试为我的h1徽标的每一侧添加一些填充，但是当我这样做时，将我的主要内容推下来。 h1在标题标记内，所以我不明白为什么它仍然推动它。在蓝色标题之后，只有蓝色标题和图像之间只有1px。

<header>
    <h1 class="logo">New York</h1>
    <nav class="main-navigation">
        <ul>
            <li>Home</li>
            <li>Photos</li>
            <li>Videos</li>
            <li>Contact</li>
        </ul>
    </nav>
</header>

jsfiddle： https://jsfiddle.net/ralphnyc/6n2qqruv/

Answer 1

请参阅此fiddle

将此添加到您的CSS

header{
    float: left;
}

因为带有类徽标的<h1>向左浮动。

Answer 2

您的header不包含浮动h1（您看到的额外空间实际上是h1周围的填充，越过蓝色header）。添加

header {
  overflow: auto;
}

使它这样做。

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
header,
nav,
section,
footer {
  display: block;
}
#wrapper {
  width: 960px;
  margin: 0 auto;
}
header {
  width: 960px;
  margin: 0 auto;
  background: #158ec5;
  height: 80px;
  overflow: auto;
}
.logo {
  color: #fff;
  font-family: Britannic;
  font-size: 20px;
  float: left;
  font-size: 40px;
  margin: 26px 0 27px 34px;
}
nav ul li {
  display: inline-block;
}
nav {
  float: right;
}
.nycimg {
  margin-top: 2px;
}
footer {
  width: 960px;
  margin: 0 auto;
}

＆＃13;

<header>

  <h1 class="logo">New York</h1>

  <nav class="main-navigation">
    <ul>
      <li>Home</li>
      <li>Photos</li>
      <li>Videos</li>
      <li>Contact</li>
    </ul>
  </nav>
</header>

<div id="wrapper">
  <section>
    <img src="http://chichimiguel.com/storage/new-york-at-night.jpg?__SQUARESPACE_CACHEVERSION=1429898751997" alt="nyc picture" width="960px" class="nycimg">
    <article>
      <h1>PHOTOS</h1>
      <img src="">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
      <a href="#">More</a>
    </article>

    <article>
      <h1>VIDEOS</h1>
      <img src="">
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
      <a href="#">More</a>
    </article>
  </section>
</div>
<footer>
  <p>&copy;2015 All Rights Reserved.</p>
  <a href="#">About Us</a> |
  <a href="#">Contact Us</a>
</footer>

＆＃13;

＆＃13;

＆＃13;

Answer 3

padding: 17px;
color: #fff;
font-family: Britannic;
font-size: 20px;
float: left;
font-size: 40px;
/* margin: 26px 0 27px 34px; */

填充你想要的不是保证金