CodePen Embed - CSS: Basic Visual Formatting: negative margin 2

<div class="out">
  <p class="neg">A paragraph inside paragraph</p>
</div>
<p class="next">Next paragraph outside div</p>
<div style="margin-top:20px">The paragraph outside div is after div according to normal flow and the background is overlap the paragraph inside.</div>

.neg{
  margin-bottom: -50px;
  background-color: rgb(60,60,60);
}

.out{
  margin-top: 50px;
  border: 1px solid;
  padding: 10px;
  background-color: rgb(40,40,40);
}

.next{
  color: red;
  background-color: rgb(160,160,160);
}

body{
  background-color: rgb(30,30,30);
  color: white;
  font-family: verdana;
}

This Pen is owned by Zone on CodePen.

See more by @zonetw on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.