图像两侧出现白条

Question

我正在网站上工作，但我的图像侧面出现白条问题。

我试图用边距修复它，但它们仍然存在。

代码如下：

body {
  overflow: hidden;
  height: 100%;
}

.navbar {
  overflow: hidden;
  background: #1A1A1A;
  font-family: Arial, Helvetica, sans-serif;
  margin: -10px;
  font-size: 14px;
  margin-bottom: 0px;
}

.navbar a {
  float: left;
  display: block;
  color: #fff;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
  transition: 0.4s;
}

.navbar a:hover {
  background-color: #36A9E0;
  color: #000;
  transition: 0.4s;
}

.navbar .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .navbar a:not(:first-child) {
    display: none;
  }
  .navbar a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .navbar.responsive {
    position: relative;
  }
  .navbar.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

.footer {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  background-color: #000;
  color: #fff;
  padding: 30px;
  margin: -10px;
  font-size: 11px;
  margin-top: -4px;
}

<html lang="fr">

<head>
  <title>Wolftime</title>
</head>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="img/logo.png">

<body>
  <div class="navbar" id="myNavbar">
    <a href="index.html">Home</a>
    <a href="news.html">Actualités</a>
    <a href="team.html">Joueurs</a>
    <a href="video.html">Vidéos</a>
    <a href="contact.html">Contacter</a>
    <a href="about.html">A propos</a>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
  </div>
  <div class="row">
    <img src="http://edeboer.free.fr/img/1.png" width="100%">
  </div>
  <div class="footer">
    <p class="legal">
      © 2018 Wolftime Entertainment. All Rights Reserved. The Wolftime logo and Wolftime.tk are trademarks of Wolftime Entertainment in FR and/or other countries.
    </p>
  </div>
  <script type="text/javascript">
    function myFunction() {
      var x = document.getElementById("myNavbar");
      if (x.className === "navbar") {
        x.className += " responsive";
      } else {
        x.className = "navbar";
      }
    }
  </script>
</body>

</html>

Answer 1

你试过把边距改成0吗？在你的 CSS?

中的 body 元素上

我刚刚在 codepen 中完成了它并且成功了。

body {
    overflow: hidden;
    height: 100%;
    margin: 0;
}

谢谢，

Answer 2

很难完全看出示例中默认样式的影响，但在代码片段中可以看到该问题。

您的图像没有白条。您的图像在 html 页面 body.

中具有固定的纵横比

页面内容有填充。您的 nav 元素堆叠在页面顶部并具有 margin: -10px。由于页面具有自然填充，因此您 "overridden" built-in 样式。

图像在填充的范围内正确堆叠 body。移除负边距会将 header 重新对齐到您的图像左右边缘。

检查图像 parent 元素内的任何不需要的边距 - 包括 html 和 body 标签。

图像两侧出现白条

White bars on both sides of the image

html

css

image

margin