html - 幅 100% の 2 つの div 間の非常に小さなギャップ

Question

こんにちは、2 つのコンテナ div があります。そのうちの 1 つには画像の背景を持つ div があり、これが問題を引き起こしている div だと思います。両方のコンテナ div を削除しようとしましたが、ギャップはまだ残っていました。マージンもパディングもありません。フォトショップで開いたときに、この行が存在しないのは画像ではないことがわかります。CSSリセットも使用しています

このスペースはどこから来ているのですか？

CSS

.container{
    width:100%;
}
.container2{
    width:100%;
}
.first-image{
    width:1430px;
    height:497px;
    background-image:url('../images/introimg.jpg');
    background-repeat:no-repeat;
    background-size: 100%;
    border:none;
}
.jamey{
    width:35%;

}
 .second-image{
    width:1430px;
    height:430px;
    background-image:url('../images/secondimg.jpg');
    background-repeat:no-repeat;
    background-size: 100%;


}

html

<div class="container">
        <div class="wrapper">
            <div id="overlay"></div>
            <div class="first-image">
                <div class="jamey">


                    <p class="def">
                        JAMEY
                    </p>
                    <p class="rip-date">03.02.1997 - 09.18.2011</p>
                    <p class="def2">Anonymous hate messages were posted on his Formspring account including one that claimed:</p>
                </div>
            </div>
        </div>
    </div>
    <div class="container2">
        <div class="intro-div">
            <div class="end-hate">
                <h1>PUT AN END TO HATE.</h1>
                <p>
                    ANYTHING WRITTEN ONLINE can become viral 
                </p>
                <p>
                    We believe that the way we behave online should be no different from the way that we behave in
                </p>
                <button type="button">JOIN CAMPAIGN</button>
            </div>
        </div>

Answer 1

あなたの問題は、

.first-image 
{
margin-bottom: -20px; // or desired settings !
}