<div class="container">
  <p>The blue element inside the white container has a margin set. Try changing it to see how it affects the space between the element and its surroundings changes.</p>

  <div class="parent">
    <div class="element">
      I have a margin in four directions.
    </div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum, iste, animi magni suscipit nobis sint voluptatem asperiores sunt fugiat in enim aspernatur nostrum veritatis repellat quasi modi neque dolores aliquam.

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga, vitae perferendis eius suscipit ipsum et aliquam. Quas, odit, atque laboriosam temporibus totam vero mollitia animi provident illo illum delectus nemo?
    </p>
  </div>

  <div class="parent">
    <div class="centered">
      I'm centered horizontally using <code>auto</code> as my horizontal margin.
    </div>
  </div>

  <div class="parent">
    <div class="offsetted">
      I am offsetted outside my parent using a negative margin to the bottom.
    </div>
  </div>
</div>
body {
  background-color: #eee;
  color: #555;
  font-size: 1.1em;
  padding: 2em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

.parent {
  border: 2px solid black;
  background-color: white;
  margin-bottom: 30px;
}

.element {
  padding: 20px;
  background-color: #0099cc;
  color: white;
  width: 250px;
  float: left;
  margin: 20px 30px 30px;
}

.centered {
  padding: 20px;
  background-color: #0099cc;
  color: white;
  width: 250px;
  margin: 50px auto;
}

.offsetted {
  padding: 20px;
  background-color: #0099cc;
  color: white;
  width: 250px;
  margin: 50px;
  margin-bottom: -50px;
}