我的 HTML + CSS 网站在屏幕的右侧和底部显示一个空白区域，而底部和右侧的边距均为 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 网站在屏幕的右侧和底部显示一个空白区域，而底部和右侧的边距均为 0
【发布时间】：2021-05-10 21:17:00
【问题描述】：

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

我已经删除了所有身体侧面的边距。但是你可以看到右边距仍然存在（白色）。我也尝试将导航栏和前边距设置为 0，但没有任何效果。下面提供了 html 和 css 代码。我正在创建这个网站作为我的作品集的样本，但右侧和底部都有一个空白区域。我不知道是什么导致了这个空间。我尝试将所有边距更改为 0 并仅使用填充，但没有任何帮助。我也尝试在不同的浏览器中打开该文件，但没有。我是编码新手，也是 stackoverflow 的新手。您的帮助将不胜感激。谢谢。

下面是我的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>

【问题讨论】：

除了你在字体下的第一个链接没有关闭这个小提琴没有显示任何红色。 jsfiddle.net/wmg2bp31/1

标签： html css padding margin

【解决方案1】：

你的身体有 0 边距并且没有内边距，只要确保孩子们受到限制（身体宽度）：

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

}

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

【讨论】：

【解决方案2】：

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

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

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

您可以通过在自己的 CSS 文件中添加一个类行来覆盖这个：

.row{
   margin: 0;
 }

在 HTML 中链接 CSS 时，只需确保您拥有的 CSS 文件位于引导样式表下方

【讨论】：

谢谢，Mar。但底部边距仍然存在。右边距被删除，但在正文底部仍有一些边距。我应该怎么做才能删除它
因此 bootstrap h1 的下边距为 0.5rem。所以只需通过在标题上添加 margin: 0 来覆盖它。所以为了澄清这一点，每个浏览器或框架（如引导程序）都有自己的默认样式，这就是为什么某些 CSS 样式不能按您希望的那样工作的原因。因此，请阅读您使用的框架的文档或使用此 CSS Reset 删除默认样式，然后再添加您自己的样式。

【解决方案3】：

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

您只需要删除该边距。

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

最简单的方法是在您要覆盖的规则集之后插入此规则集，无论是在其下方还是在包含在_grid.scss 文件之后的文件中。 p>

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

【讨论】：