右边的保证金没有显示

时间:2016-12-05 19:01:40

标签: html html5 css3

我是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>

3 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

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

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

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

答案 2 :(得分:0)

您希望将.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%的页面,包括边距,填充和边框。

相关问题