<div class="container">
  <h2>If your browser supports <code>run-in</code> you'll see me as part of the paragraph after me</h2>
    Lorem ipsum <span>I have an inline-block display so I get a height and a width</span>, consectetur adipisicing elit. Dignissimos deleniti atque quasi ut quos minus accusantium fuga suscipit assumenda ex esse facilis aspernatur facere. Unde enim nobis tempora illum dolorum.

    The image is part of my content. It has a display set to block, which means that it will break past its line box and flow on a line of its own, taking up all the horizontal space next to it. <img src="http://tympanus.net/codrops-playground/assets/images/cssref/properties/display/smiley.jpg" alt="smiley image"> And the rest of the content will start on a new line after it.
body {
  background-color: #f9f7f0;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

.container {
  margin: 40px auto 0;
  width: 90%;

p {
  padding: 20px;

img {
  display: block;
  margin: 10px 0;

h2 {
  display: run-in;
  background-color: #0099cc;
  color: white;
  padding: 20px;

span {
  display: inline-block;
  border: 1px solid #ff6100;
  width: 200px;
  height: 100px;
  padding: 10px;
  margin: 10px;