512 Pixels Linked List CSS

post.html

<h2 class="entry-title">
  <a href="web.html">
    The title of an awesome post 
    <span class="glyph" href="web.html">&raquo;</span>
  </a>
</h2>

style.css

.entry-title span.glyph {
  margin-left: 10px;
  padding: 10px 11px 10px 9px;
  background: #E2E2E2;
  height: 20px;
  width: 20px;
  line-height: 10px;
  border-radius: 75px;
  margin-top: 5px;
  position: absolute;
}

This is what "display: inline-block;" is for.

In most cases, yes. However, in this case, if the glyph was an "inline-block" element, it could be pushed down onto a line all by itself if the title was the right length, and that looked silly and unacceptable. Position: absolute; prevents the glyph from being pushed to its own line.

See: http://www.pjmccormick.com/words/why-i-didnt-use-display-inline-block-512-pixels-glyph