<h2>Paragraph Padding with Pixels</h2>
<div class="absolute">
<p class="small">Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p class="medium">Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p class="large">Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
<h2>Paragraph Padding with em Units</h2>
<div class="relative">
<p class="small">Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p class="medium">Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p class="large">Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
</div>
body {
font-family: Lato;
margin: 10px;
text-align: center;
}
.absolute p {
text-align: justify;
background: yellow;
padding: 16px;
}
.relative p {
text-align: justify;
background: yellow;
padding: 1em;
}
.small {
font-size: 0.8em;
}
.medium {
font-size: 1.2em;
}
.large {
font-size: 1.75em;
}
This Pen doesn't use any external JavaScript resources.