두 개의 div 사이에 흰 선이 표시됩니다.

제 웹 사이트의 첫 번째 2 Div ("video_main"및 "parallax") 사이에 나타나는 얇은 흰색 선을 제거하려고합니다. 이 비디오의 아티팩트일지도 모른다고 생각했기 때문에 Premiere Pro CC에서 내보내기의 아래 부분을 잘라 냈지만 여전히 나타납니다. video_main 및 시차 div에 대해 여백, 채우기 및 테두리 0px를 만들려고했으나 얇은 흰색 선을 제거하지 않았습니다. 왜 그런 일이 일어 났는지 말할 수 있습니까? 많은 감사합니다. .video_main에서 비디오 요소가 inline 다른 display에 대한 값이 누락처럼두 개의 div 사이에 흰 선이 표시됩니다.

<!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; 
}

출처

2017-11-13 Barton Lewis

작동 코드 또는 링크를 제공하십시오. –

보인다.

display (CSS)의 값을 display: block 또는 display: flex으로 설정해야 상위 컨테이너가 높이를 적절하게 조정할 수 있습니다.

Working Codepen example. .video_main video의 선언을보십시오.

출처

2017-11-13 05:47:58 owi

그게 효과가 있습니다. 감사합니다로드! –

두 개의 div 사이에 흰 선이 표시됩니다.

답변

관련 문제