<div class="container">
  <p>The spacing between the first word and the edge of the container is set to <code>2em</code>. When you hover over the text container, the indentation will transition back to its initial value. <code>text-indent</code> is transitionable so the indentation will change smoothly if you define a <code>transition</code></p>
  <div class="parent">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus earum ut alias doloremque esse. Porro maxime dicta veniam molestias sed modi sunt sapiente eum nostrum consequatur accusantium facilis blanditiis nihil.
    </p>
    <h4>Since <code>text-indent</code> cascades, the indentation on this child element's paragraphs will also change as it does on the parent, unless you specify otherwise (indentation has been reset on this title)</h4>
    <div class="child">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam, facilis, sed, consectetur incidunt quia sint accusamus obcaecati quisquam asperiores officiis mollitia explicabo est ratione. Qui id ipsa ratione inventore nam!
    </div>
  </div>
</div>
<div class="container">
  <p class="p1"><strong>This text has been indented by 10% of the width</strong>. Rem, tempora, eligendi, sequi amet vitae inventore sapiente tenetur facere nesciunt exercitationem esse repudiandae a repellat quia voluptate qui ducimus libero minus.</p>
  <p class="p2"><strong>This text has been indented by a value of <code>30px</code></strong>. Et, rerum, repellendus, incidunt, molestias alias ratione velit laudantium iure commodi reiciendis illum ab repellat quibusdam odio eos cupiditate quidem provident temporibus.</p>
  <p class="p3"><strong>This text has been indented by <code>3em</code></strong>. Saepe, voluptates, porro accusantium sequi voluptate quia doloremque molestias ad ratione ut minima modi ducimus nulla quidem pariatur repellat dolores explicabo praesentium!</p>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

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

strong {
  color: #0099cc;
}

.parent {
  background-color: #0099cc;
  color: white;
  padding: 1em;
  text-indent: 2em;
  -webkit-transition: text-indent .6s ease;
  transition: text-indent .6s ease;
}

.parent:hover {
  text-indent: 0;
}

.child {
  background-color: #eee;
  color: #333;
  padding: 1em;
}

h4 {
  text-indent: 0;
}

.p1 {
  text-indent: 10%;
}

.p3 {
  text-indent: 3em;
}

.p2 {
  text-indent: 30px;
}