html - 如何修复导航和全屏 div 之间的差距？

Question

我试图找出导航和“主页”图像之间的差距。每次我尝试使用任何 margin-top: -15px 时，div class="inner" 都会跳到图像的最右侧。

我仍在学习，所以我假设它是一些我忽略的非常简单的东西，或者添加了太多垃圾代码。这也是我在这里发表的第一篇文章，所以我希望一切顺利。

/**************************
GENERAL
**************************/

body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  position: relative;
  background-color: #fff;	
}

img {
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

a {
  text-decoration: none;
  color: #4E4E4E;
}

h1 {
  color: #4E4E4E;
  font: normal 50px 'oswald', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  color: #4E4E4E;
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}

h3 {
  color: #4E4E4E;
  margin: 0 0 1em 0;
  color: #384047;
}

#wrapper {
  position: relative;
  width: 100%;
  background: #fff;
}


/**************************
NAVIGATION
**************************/

/* Clearfix */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

/* Basic Styles */

nav {
  height: 60px;
  width: 100%;
  background: #fff;
  font-size: 13pt;
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  position: relative;
  padding-top: 10px;
  border-bottom: solid 1px #666;
  z-index: 999;
}

nav ul {
  padding: 0;
  margin: 0 auto;
  width: 625px;
}
nav li {
  display: inline;
  float: left;
}
nav a {
  color: #4E4E4E;
  display: inline-block;
  width: 125px;
  text-align: center;
  text-decoration: none;
  line-height: 40px;
}

nav li:last-child a {
  border-right: 0;
}
nav a:hover, nav a:active {
  color: #77308f;
}
nav a#pull {
  display: none;
}

/**************************
HOME | SLIDES | SPLASH
**************************/

#slides {
  max-width: 100%;
  height: 1122px;
  background: url('http://greytprints.com/images/home_bg.jpg') no-repeat top center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  display: block;
  z-index: -2;
}

#slides .inner {
  position: relative;
  top: 60%;
  text-align: center;
  width: 100%;
  text-shadow: 0 0 2px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.4);
}

#slides .inner h1 {
  color: #fff;
  font-weight: 600;
  font-size: 60px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#slides .inner h2 {
  color: #fff;
  font-weight: 400;
  font-size: 40px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 2000px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

<nav class="clearfix">
  <ul class="clearfix">
    <li><a href="index.html#newsletter">Newsletter</a></li>
    <li><a href="index.html#store">Store</a></li>
    <li id="hide_logo"><a href="index.html#home"><img src="images/gp_logo_color.png" width="55" height="55"></a></li>
    <li><a href="index.html#aboutUs">About Us</a></li>
    <li><a href="index.html#connect">Connect</a></li>
  </ul>
  <a href="#" id="pull">Menu</a>
</nav>

<div id="wrapper"> 
  <div id="slides" name="home">
    <div class="inner">
      <h1>WE ARE GREYT PRINTS</h1>
      <br>
      <span><h2>AND WE LOVE GREYHOUNDS</h2></span>
    </div>
  </div>
</div>

Answer 1

问题是 margin 崩溃，因为在 #wrapper 里面有一个<h1>与一些margin-top .

在这种情况下，您可以使用绝对定位而不是相对定位来修复它。这条路.inner (包括 <h1> )将从文档的正常流中删除，因此边距不会影响 #wrapper .

#slides .inner {
    position: absolute;
}

/**************************
GENERAL
**************************/

body {
  font-family: 'Open Sans', sans-serif;
  margin: 0;
  padding: 0;
  position: relative;
  background-color: #fff;	
}

img {
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

a {
  text-decoration: none;
  color: #4E4E4E;
}

h1 {
  color: #4E4E4E;
  font: normal 50px 'oswald', sans-serif;
  margin: 15px 0;
  font-size: 1.75em;
  font-weight: normal;
  line-height: 0.8em;
}

h2 {
  color: #4E4E4E;
  font-size: 0.75em;
  margin: -5px 0 0;
  font-weight: normal;
}

h3 {
  color: #4E4E4E;
  margin: 0 0 1em 0;
  color: #384047;
}

#wrapper {
  position: relative;
  width: 100%;
  background: #fff;
}


/**************************
NAVIGATION
**************************/

/* Clearfix */
.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

/* Basic Styles */

nav {
  height: 60px;
  width: 100%;
  background: #fff;
  font-size: 13pt;
  font-family: 'Open Sans', sans-serif;
  font-weight: bold;
  position: relative;
  padding-top: 10px;
  border-bottom: solid 1px #666;
  z-index: 999;
}

nav ul {
  padding: 0;
  margin: 0 auto;
  width: 625px;
}
nav li {
  display: inline;
  float: left;
}
nav a {
  color: #4E4E4E;
  display: inline-block;
  width: 125px;
  text-align: center;
  text-decoration: none;
  line-height: 40px;
}

nav li:last-child a {
  border-right: 0;
}
nav a:hover, nav a:active {
  color: #77308f;
}
nav a#pull {
  display: none;
}

/**************************
HOME | SLIDES | SPLASH
**************************/

#slides {
  max-width: 100%;
  height: 1122px;
  background: url('http://greytprints.com/images/home_bg.jpg') no-repeat top center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  display: block;
  z-index: -2;
}

#slides .inner {
  position: absolute;
  top: 60%;
  text-align: center;
  width: 100%;
  text-shadow: 0 0 2px rgba(0,0,0,.1), 0 1px 2px rgba(0,0,0,.4);
}

#slides .inner h1 {
  color: #fff;
  font-weight: 600;
  font-size: 60px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#slides .inner h2 {
  color: #fff;
  font-weight: 400;
  font-size: 40px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 2000px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

<nav class="clearfix">
  <ul class="clearfix">
    <li><a href="index.html#newsletter">Newsletter</a></li>
    <li><a href="index.html#store">Store</a></li>
    <li id="hide_logo"><a href="index.html#home"><img src="images/gp_logo_color.png" width="55" height="55"></a></li>
    <li><a href="index.html#aboutUs">About Us</a></li>
    <li><a href="index.html#connect">Connect</a></li>
  </ul>
  <a href="#" id="pull">Menu</a>
</nav>

<div id="wrapper"> 
  <div id="slides" name="home">
    <div class="inner">
      <h1>WE ARE GREYT PRINTS</h1>
      <br>
      <span><h2>AND WE LOVE GREYHOUNDS</h2></span>
    </div>
  </div>
</div>