<div class="container">
  <h2>If your browser supports <code>run-in</code> you'll see me as part of the paragraph after me</h2>
  <p>
    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.
    <br/><br/>

    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.
  </p>
</div>
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;
}