Question

我的HTML代码：

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="shortcut icon" href="images/favicon.ico">
    <title>Bla Bla Car Rentals - Payment</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="styles/style.css"> <!-- Link to style.css -->
    <script src="https://use.fontawesome.com/62011a4bec.js"></script><link href="https://use.fontawesome.com/62011a4bec.css" media="all" rel="stylesheet"> <!-- Font awesome CDN -->
    <script src="js/part2.js"></script>
</head>
<body>
<section class="bgimg">
    <a class="back-button" href="enquiry.html"><i class="fa fa-chevron-left" aria-hidden="true"></i> Back to website</a>
    <h1 class="heading">Payment</h1>
</section>
<div class="main">
    <div id="container">
        <div id="img-sec">
            <img id="car-img" src="images/bmw-m3.jpg">
        </div>
        <div id="summary-sec"><label>BMW - M3<span class="right-text"> 250AUD (per day)</span></label><br><label>Number of days <span class="right-text">X 1</span></label><br><label>Product total: <span class="right-text">250 AUD</span></label><br><label>Insurance Cover<span class="right-text">+50 AUD</span></label><br><label>Sports model<span class="right-text">+100 AUD</span></label><br><label>Snow Insurance Cover<span class="right-text">+0 AUD</span></label><br><hr><label class="grand">Total: <span class="right-text">400 AUD </span></label></div>
    </div>
</div>

</body>

我的CSS代码：

    body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  font-size:13px;
  font-weight: 300;
  position:relative;
  background-color:#2D112A;
}

    .bgimg{
  width: 100%;
  height: 500px;
  background: url('images/money.jpg') no-repeat center; /* Link - https://unsplash.com/collections/597225/money?photo=OCrPJce6GPk */
  background-size: cover;
  position: relative;
}
.main{
  width: 100%;
  height: 550px;
  background: #F5F5F5;
  position: relative;
  padding-top: 6%;
}

.main:before{
  content: '';
  width: 50%;
  height: 100px;
  position: absolute;
  top: -48px;
  left: 0;
  background: #F5F5F5;
  transform: skewY(6deg);
}
.main:after{
  content: '';
  width: 50%;
  height: 100px;
  position: absolute;
  top: -48px;
  right: 0;
  background: #F5F5F5;
  transform: skewY(-6deg);
}
.back-button{
  position: absolute;
  top: 8%;
  left: 3%;
  font-size: 20px;
  background: none;
  color: whitesmoke;
  border: 2px solid whitesmoke;
  border-radius: 10px;
  padding: 13px;
  cursor:pointer;
  text-decoration: none;
}
.back-button i{
  margin-right: 5px;
  font-size: 18px;
}
#container{
  margin: 0 auto;
  height: 530px;
  width: 70%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
#img-sec{
  width: 50%;
  height: 100%;
  float: left;
}
#summary-sec{
  width: 50%;
  height: 100%;
  float: left;
}
#car-img{
  height: 100%;
  width: 100%;
}
.heading{
  color: whitesmoke;
  margin: 0;
  position: relative;
  font-size: 42px;
  left: 45%;
  top: 7%;
  font-family: 'Merriweather', serif;
}

这是我网站的截图。我检查了所有的css是否有额外的填充或边距但没有。我甚至尝试用Google开发人员工具检查它但没有找到源代码。我不明白整个页面的左侧是如何出现空白的！非常感谢帮助！感谢

JSFiddleLink

Answer 1

默认body标记需要一些余量。如果您将其设置为0，则此问题将解决，您可以使用以下代码更新CSS

body {
    margin: 0px;
    padding: 0px;
}

Answer 2

我有一个名为页面重置的css文件，我多年来一直在更新，你可能想要类似的东西。无论我在哪个页面上工作，这都是我一直使用的核心内容。

stackover

Answer 3

问题位于 h1标记css 中。 left:45% 导致了问题。 所以我添加了的修复程序。

.heading {
  color: whitesmoke;
  margin: 0;
  position: relative;
  font-size: 42px;
  /* left: 45%;*/
  top: 7%;
  font-family: 'Merriweather', serif;
  /*New Css*/
  width: 100%;
  text-align: center;
}

希望它现在完美适合你:)。下面是工作代码。

＆＃13;

body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  font-weight: 300;
  position: relative;
  background-color: #2D112A;
}

.bgimg {
  width: 100%;
  height: 500px;
  background: url('images/money.jpg') no-repeat center;
  /* Link - https://unsplash.com/collections/597225/money?photo=OCrPJce6GPk */
  background-size: cover;
  position: relative;
}

.main {
  width: 100%;
  height: 550px;
  background: #F5F5F5;
  position: relative;
  padding-top: 6%;
}

.main:before {
  content: '';
  width: 50%;
  height: 100px;
  position: absolute;
  top: -48px;
  left: 0;
  background: #F5F5F5;
  transform: skewY(6deg);
}

.main:after {
  content: '';
  width: 50%;
  height: 100px;
  position: absolute;
  top: -48px;
  right: 0;
  background: #F5F5F5;
  transform: skewY(-6deg);
}

.back-button {
  position: absolute;
  top: 8%;
  left: 3%;
  font-size: 20px;
  background: none;
  color: whitesmoke;
  border: 2px solid whitesmoke;
  border-radius: 10px;
  padding: 13px;
  cursor: pointer;
  text-decoration: none;
}

.back-button i {
  margin-right: 5px;
  font-size: 18px;
}

#container {
  margin: 0 auto;
  height: 530px;
  width: 70%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#img-sec {
  width: 50%;
  height: 100%;
  float: left;
}

#summary-sec {
  width: 50%;
  height: 100%;
  float: left;
}

#car-img {
  height: 100%;
  width: 100%;
}

.heading {
  color: whitesmoke;
  margin: 0;
  position: relative;
  font-size: 42px;
  /* left: 45%;*/
  top: 7%;
  font-family: 'Merriweather', serif;
  /*New Css*/
  width: 100%;
  text-align: center;
}

＆＃13;

<section class="bgimg">
  <a class="back-button" href="enquiry.html"><i class="fa fa-chevron-left" aria-hidden="true"></i> Back to website</a>
  <h1 class="heading">Payment</h1>
</section>
<div class="main">
  <div id="container">
    <div id="img-sec">
      <img id="car-img" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150">
    </div>
    <div id="summary-sec"><label>BMW - M3<span class="right-text"> 250AUD (per day)</span></label><br><label>Number of days <span class="right-text">X 1</span></label><br><label>Product total: <span class="right-text">250 AUD</span></label><br><label>Insurance Cover<span class="right-text">+50 AUD</span></label><br><label>Sports model<span class="right-text">+100 AUD</span></label><br><label>Snow Insurance Cover<span class="right-text">+0 AUD</span></label><br>
      <hr><label class="grand">Total: <span class="right-text">400 AUD </span></label></div>
  </div>
</div>

＆＃13;

Answer 4

您可以使用通用选择器并将默认边距和填充值设为0px，这样整个网页中就不会有任何不需要的边距或填充。

* {
    margin: 0px;
    padding: 0px;
}

Answer 5

尝试在文件中添加viewport元

在第一个元标记后面的代码中插入此行。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 6

我有一个简单的解决方案，使用可以只改变标题类的位置类型。像这样： -

.heading{
  color: whitesmoke;
  margin: 0;
  position: absolute;
  font-size: 42px;
  left: 45%;
  top: 7%;
  font-family: 'Merriweather', serif;
}

Answer 7

问题出在h1.heading标记css中。您添加了left:45%导致问题。所以我已经添加了修复程序。贝娄是片段。

.heading {
   color: #f5f5f5;
   font-family: "Merriweather",serif;
   font-size: 42px;
   left: 45%;
   margin: 0;
   position: relative;
   text-align: center;
   top: 7%;
}

这是完整的工作代码。希望这能解决你的问题

  body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    font-weight: 300;
    position: relative;
    background-color: #2D112A;
  }
  
  .bgimg {
    width: 100%;
    height: 500px;
    background: url('images/money.jpg') no-repeat center;
    /* Link - https://unsplash.com/collections/597225/money?photo=OCrPJce6GPk */
    background-size: cover;
    position: relative;
  }
  
  .main {
    width: 100%;
    height: 550px;
    background: #F5F5F5;
    position: relative;
    padding-top: 6%;
  }
  
  .main:before {
    content: '';
    width: 50%;
    height: 100px;
    position: absolute;
    top: -48px;
    left: 0;
    background: #F5F5F5;
    transform: skewY(6deg);
  }
  
  .main:after {
    content: '';
    width: 50%;
    height: 100px;
    position: absolute;
    top: -48px;
    right: 0;
    background: #F5F5F5;
    transform: skewY(-6deg);
  }
  
  .back-button {
    position: absolute;
    top: 8%;
    left: 3%;
    font-size: 20px;
    background: none;
    color: whitesmoke;
    border: 2px solid whitesmoke;
    border-radius: 10px;
    padding: 13px;
    cursor: pointer;
    text-decoration: none;
  }
  
  .back-button i {
    margin-right: 5px;
    font-size: 18px;
  }
  
  #container {
    margin: 0 auto;
    height: 530px;
    width: 70%;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  }
  
  #img-sec {
    width: 50%;
    height: 100%;
    float: left;
  }
  
  #summary-sec {
    width: 50%;
    height: 100%;
    float: left;
  }
  
  #car-img {
    height: 100%;
    width: 100%;
  }
  
  .heading {
    color: whitesmoke;
    margin: 0;
    position: relative;
    font-size: 42px;
    /*left: 45%;*/
    text-align:center;
    top: 7%;
    font-family: 'Merriweather', serif;
  }

<link rel="shortcut icon" href="images/favicon.ico">
<title>Bla Bla Car Rentals - Payment</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/part2.js"></script>

<body>
  <section class="bgimg">
    <a class="back-button" href="enquiry.html"><i class="fa fa-chevron-left" aria-hidden="true"></i> Back to website</a>
    <h1 class="heading">Payment</h1>
  </section>
  <div class="main">
    <div id="container">
      <div id="img-sec">
        <img id="car-img" src="images/bmw-m3.jpg">
      </div>
      <div id="summary-sec">
        <label>BMW - M3<span class="right-text"> 250AUD (per day)</span></label>
        <br>
        <label>Number of days <span class="right-text">X 1</span></label>
        <br>
        <label>Product total: <span class="right-text">250 AUD</span></label>
        <br>
        <label>Insurance Cover<span class="right-text">+50 AUD</span></label>
        <br>
        <label>Sports model<span class="right-text">+100 AUD</span></label>
        <br>
        <label>Snow Insurance Cover<span class="right-text">+0 AUD</span></label>
        <br>
        <hr>
        <label class="grand">Total: <span class="right-text">400 AUD </span></label>
      </div>
    </div>
  </div>

</body>

这个空白区域如何进入我的网站？

7 个答案: