Two div elements are placed consecutively. When I move the first div using position: relative and top: -60px, it creates a gap between them.
Take a look at this example here: https://codepen.io/dusannis/pen/oNgBpoK
If you notice, there is a noticeable gap between the red and yellow divs. Is there a CSS property that can be added to the parent div to eliminate this gap or achieve a similar effect?
Here is the HTML structure:
<body>
<div class="container">
<div class="div-1">
<p>something here</p>
</div>
<div class="div-2"></div>
</div>
</body>
And here is the corresponding CSS:
body {
background: blue;
padding: 60px;
}
.div-1 {
padding: 60px;
position: relative;
top: -50px;
background: red;
}
.div-2 {
height: 50px;
background: yellow;
}