我的 HTML + CSS 网站在屏幕右侧和底部显示空白 space，而底部和右侧边距均为 0

Question

[![在此处输入图片描述][1]][1]

我删除了正文所有侧面的边距。但是正如您所看到的，右边距仍然存在（白色）。我也尝试将导航栏和前边距设置为 0，但没有任何效果。下面提供了 html 和 css 代码。我正在创建此网站作为我的投资组合的示例，但右侧和底部都有一个空白 space。我不知道是什么导致了 space。我尝试将所有边距更改为 0 并仅使用填充，但没有任何帮助。我也试过在不同的浏览器中打开文件，但没有。我是编码新手，也是 Whosebug 新手。非常感谢您的帮助。谢谢。

下面是我的css:

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




                            /********************Navbar*************/

.navbar
{
background-color: #0f3057;
padding: 20px 100px 10px;

}



.nav-item {
padding: 0 10px;
font-size: 1rem;
font-family: 'Didact Gothic', sans-serif;
font-weight: 100;
}

.nav-name {
font-family: 'Antic Didone', serif;
font-size: 2rem;
}



/**************************************************Front*************************************/




.title-img{
width: 100%;
height: 100%;
}

.img-div {
padding: 50px 30px 50px 100px;
}


#Front-pg {
background-color: #00587a;
}


.txt-div {
padding: 70px 0 0 0;
color: white;
text-align: center;
}

h1 {
font-family: 'Antic Didone', serif;
font-size: 4rem;
}

.p1 {
line-height: 2rem;
padding-top: 30px;
font-family: 'Didact Gothic', sans-serif;
}

.p2 {
line-height: 2rem;
font-family: 'Didact Gothic', sans-serif;
}



                     /***********************************Timing*****************************/

#Timing {
  background-color: #e7e7de;
}

.timing {
  text-align: center;
  padding-top: 40px;
}


.timing-photo {
  width: 950px;
  height: 500px
}



               /************************************* Price *******************************************/

#Price {
  background-color: #e7e7de;
  padding-top: 40px;
  text-align: center;
}

.Pricehead {
  font-family: 'Antic Didone', serif;
}

.Menu {
  text-align: left;
  font-family: 'Didact Gothic', sans-serif;

}









              /**************************************** mobile view ***********************************/



              @media (max-width: 1020px) {

              .title-img {
              width: 450px;
              height: 225px;
              }

              #Front-pg {
              text-align: center;
              }

              }

下面是我的html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
  <title>ABC Saloon</title>
  </head>


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="css/styles.css">


    <!-- Bootscrap -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>


  <!-- FONTS -->
  <link rel="preconnect" href="https://fonts.gstatic.com"
  <link href="https://fonts.googleapis.com/css2?family=Antic+Didone&display=swap" rel="stylesheet">    <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Didact+Gothic&display=swap" rel="stylesheet">

     <body>

       <section id="title">


         <!-- Nav Bar -->
         <nav class="navbar navbar-dark navbar-expand-lg">
             <a class="navbar-brand nav-name" href=""><i>ABC Saloon</i></a>
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
           </button>
           <div class="collapse navbar-collapse" id="navbarSupportedContent">
             <ul class="navbar-nav ml-auto">
                 <li class="nav-item">
                     <a class="nav-link" href="#footer">Contact</a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link" href="#pricing">Pricing</a>
                 </li>
                 <li class="nav-item">
                     <a class="nav-link" href="#cta">Gallery</a>
                 </li>
             </ul>
          </div>
         </nav>

       </section>


         <!-- Front Page-->

       <section id="Front-pg">


       <div class="row">

       <div class="col-lg-6 img-div">
         <img class="title-img" src="images/1265.jpg" alt="Saloon">
       </div>

       <div class="col-lg-6 txt-div">
         <h1><i>ABC Hair Saloon</i> </h1>
         <p class="p1">We're here to listen, educate and advise you on
           what will work best for <br>you and your new look</p>
         <br>
         <p class="p2">Founded in 2000, AR Hair Salon 356 has grown to be the number one <br>Hair Salon in New York, committed to giving you the look you’ve <br>
            always wanted. We have an extensive selection of services to choose
            <br> from so you can get exactly what you need. Swing by and see how
            <br> we can help today!</p>

       </div>
    </div>


       </section>


<section id="Timing">

  <div class="timing">
 <img class="timing-photo" src="images/timg.png" alt="timing">
  </div>

</section>


<section id="Price">

  <h1 class="Pricehead"> <i>Price List</i> </h1>

  <div class="Menu">
    

  </div>

</section>

  </body>
 </html>

Answer 1

问题出在 div 和 row 的 class 中。如果您查看 _grid.scss 文件，您会发现 class row 的规则集。它包含 margin-right: -15px; .

您只需删除该边距即可。

为此，您可以覆盖边距属性但您必须牢记一些角色，例如选择器特定性和代码的位置。

最简单的方法是将此规则集 插入到您要覆盖的规则集之后 无论是在它下面还是在 [= 之后包含的文件中12=] 文件.

.row {
    margin-right: 0 !important;
}

Answer 2

你的正文有 0 个边距且没有填充，只要确保 children 受限于（正文宽度）：

body {
margin: 0;
padding: 0;
overflow-x: hidden;

}

overflow-x 将限制 x 方向的溢出。

Answer 3

我不确定你在问什么，但我检查了一下，问题出在你的 bootstrap 上。

你放在 Front-pg 部分下的 Class 'row' 给你

margin-right: -15px
margin-left: -15px;

您可以通过在您自己的 CSS 文件中添加 class 行来覆盖此文件：

.row{
   margin: 0;
 }

在 HTML

中链接 CSS 时，请确保您拥有的 CSS 文件位于 bootstrap 样式表下方

我的 HTML + CSS 网站在屏幕右侧和底部显示空白 space，而底部和右侧边距均为 0

My HTML + CSS site is showing a blank space on right and bottom of the screen while the margin is 0 on both bottom and right

html

css

margin

padding