白线出现在 2 个 div 之间答案

【问题标题】：white line appearing between 2 div's白线出现在 2 个 div 之间
【发布时间】：2018-04-25 17:45:06
【问题描述】：

我正在尝试消除出现在我网站的第一个 2 div 之间的细白线（“video_main”和“parallax”）。我认为这可能是视频的伪影，所以我在 Premiere Pro CC 导出时裁剪了底部，但它仍然出现。我尝试为 video_main 和视差 div 设置边距、填充和边框 0px，但它并没有消除细白线。谁能告诉它为什么会发生？非常感谢。

<!DOCTYPE HTML>
<html>

<head>
  <script src="//content.jwplatform.com/libraries/YQ8opLwo.js">
  </script>
  <script src="https://use.typekit.net/qkv6kzb.js"></script>
  <script>
    try {
      Typekit.load({
        async: true
      });
    } catch (e) {}
  </script>
  <script src="https://use.typekit.net/qkv6kzb.js"></script>
  <script>
    try {
      Typekit.load({
        async: true
      });
    } catch (e) {}
  </script>
  <meta charset="UTF-8">
  <title>Barton's website</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
  <div class="video_main">
    <video width="100%" height="100%" autoplay="autoplay" loop="loop" muted="muted" preload>
    <source src="red_hook_rush_hour_trimmed.mp4" type="video/mp4">
        </video>
    <div class="content">
      <h1>Barton Lewis</h1>
      <h2>films about light and the urban landscape</h2>
      <div class="videolinks">
        <p><a href="index.html" title="home">home</a></p>
        <p><a href="bartons_film_site_works.html" title="works">works</a></p>
        <p><a href="bartons_film_site_bio.html" title="bio">bio</a></p>
        <p><a href="bartons_film_site_cv.html" title="c/v">CV</a></p>
        <p><a href="bartons_film_site_contact.html" title="contact">contact</a></p>
      </div>
    </div>
  </div>
  <div class="parallax">
    <div class="container_blank_space">
      <p>text</p>
    </div>
    <section class="wrapper_pano_and_text">
      <div class="pano">
        <img src="https://bartonlewisfilm.com/barton-3.jpg" alt="barton" width="auto" height="auto" />
      </div>
      <div class="pano_text">
        <p>text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here text goes here.</p>
      </div>
    </section>
  </div>
</body>

</html>

/* http://meyerweb.com/eric/tools/css/reset/ 
       v2.0 | 20110126
       License: none (public domain)
    */

* {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
paragraph {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}


/*THIS IS THE END OF THE MYER RESET*/

body {
  width: 100%;
  margin: 0 auto 0;
}

a {
  font-family: "europa", sans-serif;
  text-align: left;
  text-decoration: none;
  letter-spacing: 3px;
  font-size: 22px;
  color: white;
}

a:hover {
  text-decoration: underline;
}

.parallax {
  /* The image used */
  background-image: url("https://bartonlewisfilm.com/html_bckgd_1024.jpg");
  /* Set a specific height */
  height: 1620px;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.video_main {
  margin: 0 auto 0;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.video_main video {
  /*width: 100%;*/
  width: 100%;
  height: auto;
  min-width: 720px;
  margin: 0 auto;
  z-index: -1500;
}

.content h1 {
  font-family: "jaf-domus-titling-web", sans-serif;
  color: white;
  text-align: center;
  font-size: 400%;
  letter-spacing: 4px;
  z-index: 100;
  position: absolute;
  top: 50px;
}

.content h2 {
  font-family: "europa", sans-serif;
  color: white;
  text-align: center;
  font-size: 225%;
  letter-spacing: 6px;
  z-index: 100;
  position: absolute;
  top: 175px;
}

.content p {
  font-family: "europa", sans-serif;
  color: white;
  font-size: 120%;
}

h1 {
  width: 100%;
}

h2 {
  width: 100%;
}

.content .videolinks {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 100;
}

.videolinks p {
  padding: 20px;
  padding-left: 60px;
}

.videolinks p:first-child {
  padding-top: 250px;
}

.wrapper_pano_and_text {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  padding-top: 0px;
  justify-content: center;
  align-items: center;
}

.pano img {
  width: 100%;
  height: 100%;
  padding: ;
  z-index: -1500;
}

.pano_text {
  width: 45%;
  overflow: hidden;
  z-index: 100;
  position: absolute;
}

.pano_text p {
  font-family: "europa", sans-serif;
  font-size: 150%;
  padding-right: 80px;
  letter-spacing: px;
  color: white;
  font-weight: 500;
  line-height: 135%;
  font-weight: 500;
}

.container_blank_space {
  height: 75px;
}

.container_blank_space p {
  text-indent: -9999px;
}

【问题讨论】：

请提供工作代码或链接。

标签： html css margin padding

【解决方案1】：

您的.video_main 下的视频元素似乎缺少与inline 不同的display 值。

您应该将display (CSS) 的值设置为display: block 或display: flex，以便父容器可以正确调整其高度。

Working Codepen example。看看.video_main video的声明。

【讨论】：