title: CSS List Spacing After Paragraph
body: <p>If I have user generated content such as:</p>
  
  <pre><code>&lt;p&gt;my paragraph&lt;/p&gt;
  &lt;ul&gt;
    &lt;li&gt;item1&lt;/li&gt;
    &lt;li&gt;item2&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This outputs with a paragraph gap between the end of the paragraph and the list like so:</p>
  
  <p>my paragraph</p>
  
  <ul>
  <li>item1</li>
  <li>item2</li>
  </ul>
  
  <p>I know I can get rid of the gap in my CSS by setting margin-top on the UL tag and margin-bottom on the p tag but is there a way to do it without affecting the margins between actual paragraphs.</p>
  
  <p>The content is user generated with a limited set of tags available and no fonts, sizes... available so all formatting should be done in CSS if possible without having to put classes in the tags.</p>
  
  <p><strong>EDIT:</strong>
  Should have put I know because of the way margin collapsing works in CSS I could usually set   </p>
  
  <pre><code>p { margin-bottom:0; }   
  li { margin-top:0; }   
  </code></pre>
  
  <p>The separation would be correct in both cases as the margin-top property on the p tag would still be 1 but I already set margin-top to 0.2em for a smaller gap between h2 and p tags.</p>