Div Collapsing around Definition List

Question

I'm designing a meta data area for a blog, and am having some trouble formatting it correctly.

I've got 3 definition lists contained in a Div. The Div will not honor the padding I place on the DL items. I've linked to a picture to demonstrate. The first image shows what looks to be proper formatting. This is because the padding of the Div and DLs are identical. However, as the second picture shows, when I increase the padding of my DLs, the container Div doesn't honor it.

It's worth noting, I'm using display:inline, not floats here.

http://gettinderbox.com/blogdesign/i/busted.gif

.post_meta {
 padding: 8px 0 7px 0;
 margin: 20px 0;
 border-top: 1px solid #dddcdc;
 border-bottom: 1px solid #dddcdc;
 display: block;
}

.post_meta dl {
 display: inline;
 border-right: 1px solid #dddcdc;
 margin-right: 10px;
 padding: 20px 5px 20px 0;
}

.post_meta dt {
 font-weight: bold;
 margin-right: .1em;
 display: inline;
}

.post_meta dd {
 display: inline;
}

.post_content {
 display: inline;
}

<div class="post_meta">
 <dl>
 <dt>August 10, 2010</dt>
 </dl>
 <dl>
 <dt>Posted By</dt>
 <dd><a href="">Dustin Sapp</a></dd>
 </dl>
 <dl>
 <dt>Posted In</dt>
 <dd><a href="http://"&gt;Proposals&lt;/a&gt;, <a href="http://"&gt;Editing&lt;/a&gt;&lt;/dd&gt;
 </dl>
</div><!-- END POST_META -->

Answer 1

How about using inline-block instead of inline?