CodePen Embed - Mozilla Hacks two-value display: inline-block

<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;
}

This Pen is owned by Rachel Andrew on CodePen.

See more by @rachelandrew on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.