title: What is the best practice for handling CSS margin/padding "conflicts"?
body: <p>I have a <code>&lt;div&gt;</code>, with <code>padding{0.5em}</code>.  Inside that are a bunch of <code>&lt;label&gt;</code>s with form fields etc in them, set to <code>display:block;margin:0 0 0.8em</code>, to give a bit of space between them.</p>
  
  <p>The problem is that the bottom of my div then ends up with an effective padding-bottom of 1.3em.</p>
  
  <p>What's the best solution to this?</p>
  
  <p>I can set the div's padding to <code>0.5em 0.5em 0 0.5em</code> to "improve" the problem from 1.3em to 0.8em, but it's still not the 0.5em that it should be.  Negative padding values aren't allowed.</p>
  
  <p>I can obviously use a <code>:last-child</code> pseudoselector to give a <code>margin-bottom</code> of 0 on the last label tag, but I feel there must be a neater/easier/more maintainable way?</p>
  
  <p>I could set <code>margin:0.4em 0</code> and <code>padding:0.1em 0.5em</code>, but it seems messy, and breaks down as soon as I want to add (for example) an <code>&lt;h2&gt;</code> at the top of the div.</p>
  
  <p>Ideally I'd like for the first top and last bottom margin on the child elements to be set to "collapse", somehow.</p>
  
  <p>Thanks!</p>