Inline Headings for Underlining

I wanted to underline the subheadings for a site using the border property. As you know h1 is a block element and if you turn its bottom border on then you will get a long line across the entire width which is not what I was exactly looking for. Just to refresh memories, a block level element is displayed by the browser as if it has a linebreak before and after it to separate each block. Linebreak is the equivalent of a carriage return or the enter key on your keyboard.

Since for my underlining purposes, the line is supposed to be limited to the amount of text in the heading, my only choice was to change the display property of the h1 element to inline. That's easy enough as long as you take care of the margins before and after the new inline h1 element. I did that through two new classes for paragraphs.

<h1>Underlined Headings</h1>
<p class="postinline">Next up is underlining the 
headings for different sections using the border property.   
We have four different sections so I write 4 descendant selectors  
using the divs that contain them.
</p>

The CSS:

h1 {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 16px;
  padding-bottom: 2px;
  border-bottom: 1px dotted #515151;
  display: inline;
}

.postinline {
  margin-top: 15px;
}

.beforeinline {
  margin-bottom: 15px;
}