css - 我无法删除页面顶部的边距

Question

我无法删除两个边距。页面顶部的一个和我的英雄形象下方的一个。我试过 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>

Answer 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%;
}