SOURCE

display: block margin 为负值时
<div class="box">
  <div class="inner-box margin-left"></div>
</div>

<div class="box">
  <div class="inner-box margin-right"></div>
</div>

<div class="box">
  <div class="inner-box margin-top"></div>
</div>

<div class="box">
  <div class="inner-box margin-bottom"></div>
  <div class="inner-box margin-bottom"></div>
</div>

.box {
  width: 400px;
  height: 200px;
  border: 1px solid red;
  box-sizing: border-box;
  padding: 50px;
}
.box + .box {
  margin-top: 10px;
}
.box .inner-box {
  border: 1px solid green;
  height: 100px;
  width: 300px;
}

.inner-box.margin-left {
  margin-left: -50px;
}

.inner-box.margin-right {
  margin-right: -50px;
}

.inner-box.margin-top {
  margin-top: -50px;
}

.inner-box.margin-bottom {
  margin-bottom: -1px;
}

.inner-box.margin-bottom:last-child {
  margin-bottom: 0px
}