Question

有人可以帮助我理解为什么我的div左边有一个空白标题“ header-image”吗？我正在制作一个网站，顶部有一个div，但是当我在编辑器中打开它时，它在页面旁边的div左侧显示了一个小的白色间隙。我没有左边距或左边距。这是一个代码段：https://jsfiddle.net/ahpon8wu/2/

<body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="js\maincontent.js"></script>
<script src = 'js\main.js'></script>
<div class = "menu">
<ul>
    <li id = "active"><a>Home</a></li>
    <li><a href="politics.html">Articles</a></li>
    <li><a href="members.html">Members</a></li>
    <li><a href="discussions.html">Discussions</a></li>
    <li><a href="contact.html">Contact</a></li>

</ul>
</div>



<div class="header-image">
<div class="titlecontainer">
    <div class = "header-title">
        <h1> Anarchists and Autocrats </h1>
    </div>
    </div>
</div>

这是CSS：

.menu {
width: 100%;
background-color: #ffffff;
height: 100px;
position: fixed;
top: 0;
left: 0;
z-index: 4;
font-family: NexaLight;
text-align:center;
width:100%;
overflow:hidden;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.35);

}


.menu ul {
display: inline-block;
vertical-align:middle;
margin: 0px;
padding: 0px;
line-height: 100px;

}

.menu li {
padding-left: 40px;
padding-right: 40px;
display:inline;
text-decoration:none;
list-style:none;
vertical-align:middle;

}

.menu li a {
text-decoration:none;
list-style:none;
color: #333333;
text-shadow: 2px 2px rgb(112, 112, 112, 0.3);

}


.menu li a:hover {
color: #4769b2;
text-shadow: 2px 2px rgb(108, 138, 204, 0.3);
}



.header-title {
text-align: center;
margin-left: auto;
margin-right: auto;


}

.titlecontainer {
width: 100%;
position: fixed;
z-index: 0;


}

.header-title h1 {
color: white;
text-shadow: 2px 2px 4px #d1d1d1;
font-family:'NexaLight';
letter-spacing: 1px;
white-space: nowrap;
text-transform: uppercase;
font-size: 3em;
text-align: center;

}

.header-image {
background: url("images/Westminster.jpg") bottom/ cover;
width: 100%;
height: 65vh;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
position: relative;
margin-top: 90px; /*Somehow, this means that the 'header-image' div will 
slot right beneath the bar instead of going underneath? */
/* Here I use something from www.howtocenterincss.com */
display: flex;
justify-content: center; /*Not sure if this is neccessary */
align-items: center;
z-index: -1;
margin-bottom: 10px;

}

@media (orientation: portrait) {
.header-image {
    background: url("images/Westminstermobile.jpg") bottom/ cover;
    width: 100vw;
    height: 50vh;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;
}

p {
    overflow-y: hidden;
}

html, body {
    overflow-x: scroll;

}

}

Answer 1

正如Nauren所说，如果您添加该问题，便可以解决

    html, body{
      margin:0px;
    }

更好的是，使用CSS重置样式表。浏览器默认情况下具有不同的样式，因此该操作将所有HTML元素的样式重置为同质的基础。这样，您就可以开始为每个浏览器设置样式，而不必担心它们之间的不一致。

本文可以帮助您入门https://cssreset.com/what-is-a-css-reset/

Answer 2

这是由于浏览器在标签html，body上的默认页边距，请在样式表/样式顶部添加以下CSS并更正问题！

html, body{
    margin:0px;
}

$(document).ready(function() {
  $(window).scroll(function(event) {
    let scroll = $(this).scrollTop();
    let opacity = 1 - (scroll / 200);
    if (opacity >= 0) {
      $('.header-title').css('opacity', opacity);
      if (scroll / 200 >= 0.9) {
        $('.header-title').hide();
      } else {
        $('.header-title').show();
      }
    }
  });
});

html,
body {
  margin: 0px;
}

body {
  font-family: Futura, sans-serif;
  height: 100%;
  width: 100%;
  background-color: #ffffff;
}

@font-face {
  font-family: SourceSansPro-Regular;
  src: url('fonts/SourceSansPro-Regular.ttf');
}

@font-face {
  font-family: SourceSansPro-Light src: url('fonts/SourceSansPro-Light.ttf');
}

@font-face {
  font-family: NexaLight;
  src: url('fonts/Nexa-Light.otf');
}

html,
body {
  overflow-x: hidden;
}

.menu {
  width: 100%;
  background-color: #ffffff;
  height: 100px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
  font-family: NexaLight;
  text-align: center;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.35);
}

.menu ul {
  display: inline-block;
  vertical-align: middle;
  margin: 0px;
  padding: 0px;
  line-height: 100px;
}

.menu li {
  padding-left: 40px;
  padding-right: 40px;
  display: inline;
  text-decoration: none;
  list-style: none;
  vertical-align: middle;
}

.menu li a {
  text-decoration: none;
  list-style: none;
  color: #333333;
  text-shadow: 2px 2px rgb(112, 112, 112, 0.3);
}

.menu li a:hover {
  color: #4769b2;
  text-shadow: 2px 2px rgb(108, 138, 204, 0.3);
}

#active {
  font-weight: bold;
}


/* Fonts!!!
font-family: 'Raleway', sans-serif;
font-family: 'Quicksand', sans-serif;
font-family: 'Open Sans', sans-serif;
font-family: 'Lato', sans-serif;
font-family: 'Arima Madurai', cursive;


*/

.header-title {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.titlecontainer {
  width: 100%;
  position: fixed;
  z-index: 0;
}

.header-title h1 {
  color: white;
  text-shadow: 2px 2px 4px #d1d1d1;
  font-family: 'NexaLight';
  letter-spacing: 1px;
  white-space: nowrap;
  text-transform: uppercase;
  font-size: 3em;
  text-align: center;
}

.header-image {
  background: url("http://www.freeimageslive.com/galleries/buildings/london/pics/palace_of_westminster.jpg") bottom/ cover;
  width: 100%;
  height: 65vh;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  position: relative;
  margin-top: 90px;
  /*Somehow, this means that the 'header-image' div will slot right beneath the bar instead of going underneath? */
  /* Here I use something from www.howtocenterincss.com */
  display: flex;
  justify-content: center;
  /*Not sure if this is neccessary */
  align-items: center;
  z-index: -1;
  margin-bottom: 10px;
}

@media (orientation: portrait) {
  .header-image {
    background: url("images/Westminstermobile.jpg") bottom/ cover;
    width: 100vw;
    height: 50vh;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    position: relative;
  }
  p {
    overflow-y: hidden;
  }
  html,
  body {
    overflow-x: scroll;
  }
}

.contentwrapper {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}

.content {
  height: 1500px;
  padding: 5px;
  background-color: rgba(255, 255, 255, 0.6);
  font-family: 'SourceSansPro-Regular';
  z-index: 1;
  font-size: 105%;
  text-indent: 0px;
  padding: 0px;
  overflow-x: auto;
  margin-left: 0px;
  margin-right: 0px;
}

#Subtitle {
  text-align: center;
}

#firstpoint,
#secondpoint,
#thirdpoint {
  padding-top: 10px;
}

<!DOCTYPE html>
<html>
<link href="main.css" type="text/css" rel="stylesheet" />
<!-- Google fonts beneath -->
<link href="https://fonts.googleapis.com/css?family=Arima+Madurai:300|Lato:300|Open+Sans:300|Quicksand|Raleway" rel="stylesheet">

<head>
  <title> Big Oof </title>


</head>

<body>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="js\maincontent.js"></script>
  <script src='js\main.js'></script>
  <div class="menu">
    <ul>
      <li id="active"><a>Home</a></li>
      <li><a href="politics.html">Articles</a></li>
      <li><a href="members.html">Members</a></li>
      <li><a href="discussions.html">Discussions</a></li>
      <li><a href="contact.html">Contact</a></li>

    </ul>
  </div>



  <div class="header-image">
    <div class="titlecontainer">
      <div class="header-title">
        <h1> Anarchists and Autocrats </h1>
      </div>
    </div>
  </div>

  <div class="contentwrapper">
    <div class="content">


      <div id="firstpoint">
        <p>Anarchists and Autocrats is a webzine/blog which was founded in 2018. Since then, Anarchists and Autocrats has become host to over twenty authors, artists and thinkers who write about current events, philosophy, politics, culture and many other
          topics.
        </p>
      </div>





      <div id="secondpoint">
        <p> While all authors try to produce well-balanced views within articles and essays written, it goes without needing to be said that each author has their own biasses that will find themselves within each article, whether that's in the language used
          or even the subject matter. Anarchists and Autocrats aims to bring about different and far-reaching opinions, but it is impossible to present a fully diverse and differing set of viewpoints for which we can present: finding an anarcho-syndicalist,
          a monarchist, a paleo-conservative and a social democrat all at once for instance will be difficult, or even impossible; ultimately, although different viewpoints are supported and promoted, Anarchists and Autocrats will have difficulty presenting
          a completely diverse and varying set of viewpoints. Anarchists and Autocrats also does not necessarily support the viewpoints that individual authors hold.
        </p>
      </div>
      <div id="thirdpoint">

        <p> Anarchists and Autocrats is an open project for everyone still in secondary education, so if you would like to get in touch or write an article, please navigate to the 'contact' tab. </p>
      </div>
    </div>
  </div>
</body>

</html>

尽管div的左边距设置为0，但div旁边的空白

2 个答案: