<h2 class="title">Negative Margin</h2>
<div class="block-one"></div>
<div class="block-two"></div>
:root {
box-sizing: border-box;
}
*,
::before,
::after {
box-sizing: inherit;
}
body {
font-family: 'Lato', sans-serif;
padding: 20px 40px;
font-size: 120%;
line-height: 1.5;
color: #565656;
}
.block-one {
height: 120px;
background: rgba(96, 96, 205, 0.44);
margin-bottom: 120px;
}
.block-two {
height: 120px;
background: rgba(255, 0, 0, 0.35);
margin-top: -60px;
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.