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页面正文中具有固定的宽高比。

页面内容有填充。您的nav元素位于页面顶部，并且margin: -10px。由于页面具有自然填充，因此您“覆盖”了内置样式。

图像在填充体的范围内正确堆叠。删除负边距会将标题重新对齐到图像的左右边缘。

检查图片父元素中的所有不需要的边距 - 包括html和body标记。

图像两侧有白条

2 个答案: