Question

我是HTML和CSS的新手，我对保证金有疑问。

我在页面的左侧和右侧添加了40px的边距，但是，页面右侧的边距没有显示。希望得到一些帮助和建议，为什么会发生这种情况。谢谢！

html {
  height: 100%;
}
body {
  margin: 0;
  height: 100%;
}
@font-face {
  font-family: 'Apercu-Bold';
  src: url('../fonts/Apercu-Bold.otf');
}
@font-face {
  font-family: 'Apercu-Regular';
  src: url('../fonts/Apercu-Regular.otf');
}
.full-width {
  width: 100%;
  box-sizing: border-box;
  margin-left: 40px;
  margin-right: 40px;
}
.appstore-btn-container {
  position: absolute;
  text-align: center;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
}

/*SECTION ONE*/

.banner_container1 {
  background-image: url(../images/adventuretimes-hero.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: relative;
  border-radius: 8px;
  height: 600px;
}
.content1 {
  padding: 220px 10%;
  text-align: center;
}
.content1 h1 {
  color: white;
  font-size: 50px;
  font-family: 'Apercu-Bold';
  line-height: 60px;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.content1 p {
  margin-top: 20px;
  text-align: center;
  color: white;
  font-family: 'Apercu-Bold';
  font-size: 12px;
  letter-spacing: 1.3px;
  line-height: 25px;
}
.top-text-container {
  position: absolute;
  text-align: center;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}
.path {
  vertical-align: middle;
}
.path img {
  vertical-align: middle;
}

<section class="full-width banner_container1">
  <div class="content1">
    <div class="top-text-container">
      <h1>Discover the Best Outdoor <br> Adventures Near you</h1>
      <div class="path">
        <img src="images/Path.png" alt="">
      </div>
      <p>ADVENTURE TIMES IS THE BEST PLACE TO FIND OUTFOOR <br> ADVENTURES ANYWEHRE YOU GO.</p>
    </div>
    <div class="appstore-btn-container">
      <img src="images/appstore-white.png" alt="appstore button" width="230px">
    </div>
  </div>
</section>

Answer 1

HTML设置为100％宽度以及容器元素。所以你的容器元素占据了浏览器宽度的100％。然后它被你的边距左推到右边40px。您的保证金权利可能就在那里，它就在页面之外。

我可能建议使用一个容器元素，其宽度为40px，并在其中包含另一个元素以获得相同的效果。

Answer 2

由于你给了full-width元素100％和一个边距，你需要从中减去边距，就像这样

.full-width {
  width: calc(100% - 80px);
  box-sizing: border-box;
  margin-left: 40px;
  margin-right: 40px;
}

注意，box-sizing: border-box不考虑边距，只考虑边框和填充。

Answer 3

您希望将.full-width设置为最大宽度为100％.vs为正常宽度：100％;

.full-width {
  max-width: 100%;
  box-sizing: border-box;
  margin-left: 40px;
  margin-right: 40px;
}

宽度不包括填充，边距或边框，因此它占据屏幕宽度并为每端添加40px（因此溢出）。如果您在正文或html中有一个设置的宽度，那么您的部分将占用该宽度的100％，并为此添加了40px。最大宽度可防止截面元素消耗超过100％的页面，包括边距，填充和边框。

右边的保证金没有显示

3 个答案: