我无法从页面顶部删除边距答案

【问题标题】：I'm unable to remove the margin from the top of my page我无法从页面顶部删除边距
【发布时间】：2016-10-21 21:58:47
【问题描述】：

我无法删除两个边距。页面顶部的一个和我的英雄形象下方的一个。我试过margin 0、padding 0等。我什至试图从body和html中删除它。我该如何解决这个问题？

/* Setting up our grid */

html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  width: 100%;
  /*Set the width of the entire website here */
  margin-right: auto;
  margin-left: auto;
  /*Margin-left and right are set to auto to center the container */
}
.seven:first-child,
.eight:first-child,
.nine:first-child,
.ten:first-child,
.eleven:first-child,
.five:first-child,
.four:first-child,
.three:first-child,
.two:first-child,
.one:first-child,
.six:first-child {
  margin-left: 0;
  /* This line of code makes the left-most column align to the left of the screen */
}
.eleven {
  width: 91.5%;
  float: left;
  margin-left: 2%;
}
.ten {
  width: 83%;
  float: left;
  margin-left: 2%;
}
.nine {
  width: 74.5%;
  float: left;
  margin-left: 2%;
}
.eight {
  width: 66%;
  float: left;
  margin-left: 2%;
}
.seven {
  width: 57.5%;
  float: left;
  margin-left: 2%;
}
.six {
  width: 50%;
  /* This div spans six columns (the entire row)*/
  float: left;
  margin-left: 0%;
}
.five {
  width: 40.5%;
  /* This div spans five columns */
  margin-left: 2%;
  float: left;
}
.four {
  width: 32%;
  float: left;
  margin-left: 2%;
}
.three {
  width: 23.5%;
  float: left;
  margin-left: 2%;
}
.two {
  width: 15%;
  float: left;
  margin-left: 2%;
}
.one {
  width: 6.5%;
  float: left;
  margin-left: 2%;
}
.row {
  width: 100%;
  clear: both;
  /* Clear creates new styles for the next row */
  padding: 0px;
  margin: 0px;
}
header {
  height: 110px;
}
.hero-image {
  height: 767.38px;
  background-image: url(vintagemcdonalds.jpg);
  background-repeat: no-repeat;
}
.row2 .six {
  width: 50%;
  height: 495.56px;
  background-color: grey;
}
.row2 .right {
  width: 50%;
  background-color: blue;
}
.row3 .lower {
  width: 50%;
  height: 495.56px;
  background-color: green;
}
.row3 .corner {
  width: 50%;
  height: 495.56px;
  background-color: black;
}
.follow {
  height: 908px;
  background-color: tan;
}
.bottom {
  height: 169px;
  background-color: grey;
}
footer {
  height: 169px;
  background-color: black;
}

<div class="container">
  <!--everything on the page-->
  <div class="row">
    <div class="hero-image">
      <header>
        <h1>Vintage McDonald's</h1>
      </header>
      <h2>Welcome to McDonald's!<br>Come and try our NEW Big Mac!!!</h2>
    </div>
  </div>
  <!--closing row 1-->

  <div class="row">
    <div class="row2">
      <div class="six">
      </div>
      <div class="six right">
      </div>
    </div>
  </div>
  <!--closing row 2-->

  <div class="row">
    <div class="row3">
      <div class="six lower">
      </div>
      <div class="six corner">
      </div>
    </div>
  </div>
  <!--closing row 3-->

  <div class="row">
    <div class="follow">
    </div>
  </div>
  <!--closing row 4-->

  <div class="row">
    <div class="bottom">
    </div>
  </div>
  <!--closing row 5-->

  <div class="row">
    <footer>
    </footer>
  </div>
  <!--closing row 6-->
</div>

【问题讨论】：

移除 h2 的边距

标签： css containers whitespace margin

【解决方案1】：

如果我理解正确的话>>>试试这个：你的 CSS 有类：

.hero-image {
    height: 767.38px;
    background-image: url(vintagemcdonalds.jpg);
    background-repeat: no-repeat;
}

删除高度：

.hero-image {
        backgrround-image: url(vintagemcdonalds.jpg);
        background-repeat: no-repeat;
}

并添加新的 CSS 样式：

h2 {
margin-bottom:0;
}

希望对您有所帮助...

更新>>> 试试这个

.hero-image {
            backgrround-image: url(vintagemcdonalds.jpg);
 background-repeat: no-repeat;
 background-size:contain;
    }

或

.hero-image {
backgrround-image: url(vintagemcdonalds.jpg);
 background-repeat: no-repeat;
 background-size: 100% 100%;
}

【讨论】：

嘿。我试过了，它删除了我图像下的空白。但现在图像已被削减到其大小的 20% 左右。

【解决方案2】：

试试这个链接：https://necolas.github.io/normalize.css/5.0.0/normalize.css 将代码复制并粘贴到新的 css 文件中，并将其链接到任何其他文件之前。

并尝试这样做以从页面顶部删除边距：

.container {
  margin-top: 0;
}

这是英雄形象：

.hero-image header {
  margin-bottom: /* how much ever you want*/
}

或者如果这不起作用，那么试试这个：

.row {
  margin-bottom: /* how much ever you want*/
}

【讨论】：