html - 图片未触摸屏幕边框

Question

我正在编写一个网站，背景图片不适合整个屏幕，图片和屏幕边框之间有空白。我在谷歌上搜索了一个小时，“边距：0；填充：0 ; 边界：0;" 一切都没有奏效。

这是我的代码：

nav ul {
  border-style: solid;
  border-width: 0px;
  padding: 10px;
  margin: 0px 0px 0px 0px;
  background-color: none;
  text-align: center;
}

nav ul li {
  list-style-type: none;
  display: inline;
  margin-right: 10px;
  margin-left: 10px;
  color: black;
  font-size: 150%;
}

nav ul li a {
  text-decoration: none;
  color: black;
}

#big {
  text-align: right;
  color: black;
  margin: 10px 0px 0px 0px;
  padding: 10px 0px 0px 0px;
}

#first {
  background-image: url('https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0px 0px 0px 0px;
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
}

#text1 {
  text-align: center;
}

#nav1 {
  position: fixed;
  text-align: center;
  height: auto;
  width: auto;
}

jpg {
  line-height: 0px height:100%;
}

h1 {
  margin-top: 5in;
}

<div id="first" background-image="Logo.jpg">
  <header>
    <nav id="nav1">
      <ul>
        <li>Home</li>
        <li><a href="join_us.html">Join</a></li>
        <li><a href="contact_us.html">Contact us</a></li>
        <li><a href="about_us.html">About us</a></li>
        <li><a href="Sub.html">Subscriptions</a></li>
      </ul>
    </nav>
  </header>
  <br><br>
  <h1 id="big">############################.</h1>
  <p>.</p>
  <br><br><br><br><br>
</div>

抱歉，我的代码安排不当且不专业。我真的很感激一个答案。

标签： htmlcss

Answer 1

我相信你应该添加你的CSS

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

默认情况下，文档正文周围有一个边距，这就是您在图片周围看到白色边框的原因

html,
body {
  margin: 0;
  padding: 0;
}
nav ul {
  border-style: solid;
  border-width: 0px;
  padding: 10px;
  margin: 0px 0px 0px 0px;
  background-color: none;
  text-align: center;
}

nav ul li {
  list-style-type: none;
  display: inline;
  margin-right: 10px;
  margin-left: 10px;
  color: black;
  font-size: 150%;
}

nav ul li a {
  text-decoration: none;
  color: black;
}

#big {
  text-align: right;
  color: black;
  margin: 10px 0px 0px 0px;
  padding: 10px 0px 0px 0px;
}

#first {
  background-image: url('https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0px 0px 0px 0px;
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
}

#text1 {
  text-align: center;
}

#nav1 {
  position: fixed;
  text-align: center;
  height: auto;
  width: auto;
}

jpg {
  line-height: 0px height:100%;
}

h1 {
  margin-top: 5in;
}

<div id="first">
  <header>
    <nav id="nav1">
      <ul>
        <li>Home</li>
        <li><a href="join_us.html">Join</a></li>
        <li><a href="contact_us.html">Contact us</a></li>
        <li><a href="about_us.html">About us</a></li>
        <li><a href="Sub.html">Subscriptions</a></li>
      </ul>
    </nav>
  </header>
  <br><br>
  <h1 id="big">############################.</h1>
  <p>.</p>
  <br><br><br><br><br>
</div>