<h1>Basic document flow</h1>

  I am a basic block level element. My adjacent block level elements sit on new
  lines below me.

  By default we span 100% of the width of our parent element, and we are as tall
  as our child content. Our total width and height is our content + padding +
  border width/height.

  We are separated by our margins. Because of margin collapsing, we are
  separated by the width of one of our margins, not both.

  Inline elements <span>like this one</span> and <span>this one</span> sit on
  the same line along with adjacent text nodes, if there is space on the same
  line. Overflowing inline elements will
  <span>wrap onto a new line if possible (like this one containing text)</span>,
  or just go on to a new line if not, much like this image will do:
  <img src="https://picsum.photos/200/100" alt="snippet of cloth" />
body {
  width: 500px;
  margin: 0 auto;

p {
  background: rgba(255, 84, 104, 0.3);
  border: 2px solid rgb(255, 84, 104);
  padding: 10px;
  margin: 10px;

span {
  background: white;
  border: 1px solid black;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.