<p>This is a paragraph which contains a span element. The  span element is an regular inline element <span>and has padding applied</span>. You can see how the padding does not push away the surrounding text.</p>

<p>This paragraph has a span <span class="ib">with padding</span> but is an inline block so you can see the difference between the layouts.</p>
p {
  width: 300px;

span {
  background-color: rgba(0,0,0,.4);
  color: #fff;
  padding: 10px;

.ib {
  display: inline-block;

body {
  padding: 1em;
  font: 1.2em/1.4 Arial, Helvetica, sans-serif;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.