堆栈内存溢出
  简体   繁体   English

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

 原文  2021-02-06 20:43:38  8   3    html/ css/ padding/ margin

问题描述

[![enter image description here][1]][1] [![在此处输入图像描述][1]][1]

I've removed margin from all body sides.我已经从身体的所有侧面移除了边距。 But as you can see the right margin is still there(in white).但是你可以看到右边距仍然存在（白色）。 I've tried to set my navbar and front margin to 0 as well but nothing is working.我也尝试将导航栏和前边距设置为 0，但没有任何效果。 The html and css code is provided below.下面提供了 html 和 css 代码。 I'm creating this website as a sample for my portfolio but there is a blank space on the right side and also on the bottom.我正在创建这个网站作为我的作品集的样本，但右侧和底部都有一个空白区域。 I have no idea what is causing the space.我不知道是什么导致了这个空间。 I have tried changing all the margins to 0 and use only paddings but nothing is helping.我尝试将所有边距更改为 0 并仅使用填充，但没有任何帮助。 I have tried to open the file in different browsers too but nothing.我也尝试在不同的浏览器中打开该文件，但没有。 I'm new to coding and also new to stackoverflow.我是编码新手，也是 stackoverflow 的新手。 Your help will be much appreciated.您的帮助将不胜感激。 Thanks.谢谢。

Below is my css:下面是我的 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;
              }

              }

Below is my html:下面是我的 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>

3 个解决方案

解决方案1
 0  2021-02-06 22:56:42

The problem is in the div with the class of row .问题出在带有row的 div 中。 if you take a look in _grid.scss file, you will find a rule-set for the class row .如果您查看_grid.scss文件，您会发现 class row的规则集。 it contains margin-right: -15px;它包含margin-right: -15px; . .

you just need to remove that margin.你只需要删除那个边距。

to do that, you can override the margin property but you have to put in mind some roles such as selector-specificity and the place of your code.为此，您可以覆盖边距属性，但您必须记住一些角色，例如选择器特异性和代码位置。

the easiest way is to just insert this rule-set after the rule-set that you want to override Whether below it or in a file that is included after the _grid.scss file.最简单的方法是在要覆盖的规则集之后插入此规则集，无论是在它下面还是在_grid.scss文件之后包含的文件中。

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

解决方案2
 0  2021-02-06 23:06:02

Your body has 0 margin and no padding, just make sure the children are limited by that (body width):你的身体有 0 边距并且没有填充，只要确保孩子们受到限制（身体宽度）：

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

} }

overflow-x will limit overflowing on the x direction. overflow-x 将限制 x 方向的溢出。

解决方案3
 0 已采纳  2021-02-06 23:16:53

I am not sure what you are asking but I checked it and the problem comes from the bootstrap you have.我不确定你在问什么，但我检查了它，问题来自你拥有的引导程序。

The Class 'row' you put under the section of Front-pg is giving you您放在 Front-pg 部分下的 Class 'row' 给您

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

You can overwrite this one by adding a class row in your own CSS file:您可以通过在自己的 CSS 文件中添加 class 行来覆盖此行：

.row{
   margin: 0;
 }

Just make sure that the CSS file you have is below the bootstrap stylesheet when linking the CSS in the HTML只需确保在 HTML 中链接 CSS 时，您拥有的 CSS 文件位于引导样式表下方

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 边距忽略顶部，右侧和底部CSS，HTML - Margin ignoring top,right,and bottom CSS,HTML 使用 CSS 在屏幕右下角添加一个框 - Add a box to the bottom right of the screen using CSS 页面底部和右侧的空间 - Space at the bottom and right side of my page 对齐屏幕离子HTML右下角的按钮 - Aligning a button on bottom right of screen ionic html 删除信息窗口的右下边距 - Remove right and bottom margin on infowindows 在 html 和 css 边框底部和右侧保持黑色 - In html and css Border bottom and right stays black 如何在 html css 中固定 position 右下角 - How to fixed position bottom right in html css CSS 浮动右下角 - CSS float bottom right 什么CSS可能导致页边距在底部/右侧断裂？ - what CSS could cause a page margin to break on bottom / right sides? 为什么我的HTML表扩展到底部和右侧？ - Why is my HTML table extending to the bottom and right?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM