Question

嗨我有两个容器div，其中一个有一个带图像背景的div，我认为这是造成问题的div。我尝试删除两个容器div，差距仍在这里。没有边距没有填充，我知道当我在photoshop中打开它时，它不是具有此行的图像。我也在使用css reset white space

这个空间来自哪里？

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

您可以尝试添加

box-sizing: border-box;

它有助于在元素内部设置填充/边框（可能有一个）。如果它有一些效果，您可以稍后覆盖这些设置。

无论如何，建议您添加一个jsFiddle，以便我们自己查看。

Answer 2

您的问题可以通过

删除

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

两个div之间的间隙非常小，宽度为100％

2 个答案: