title: CSS box model (margins and padding) for vertical spacing between paragraphs
body: <p>How should CSS 'margin' and 'padding' be used for vertical inter-paragraph spacing:</p>
  
  <ul>
  <li>Can the vertical space between paragraphs be defined using padding and/or using margins?</li>
  <li>If it can be done with either, then which is the better or more normal one to use?</li>
  <li>Do you tend to define non-zero padding <em>and</em> non-zero margins, and if so then how much of each?</li>
  </ul>
  
  <p>The <a href="http://www.w3.org/TR/CSS21/box.html#mpb-examples" rel="nofollow noreferrer">Example of margins, padding, and borders</a> explains <em>in theory</em> what the difference is between margin and padding: I'm questioning how much of each to use <em>in practice</em>, to render a normal, good-looking page.</p>
  
  <hr>
  
  <p>Secondly, given markup like the following ...</p>
  
  <pre><code>&lt;p&gt;Paragraph.&lt;/p&gt;
  &lt;ul&gt;
  &lt;li&gt;List item.&lt;/li&gt;
  &lt;li&gt;Another list item.
  &lt;p&gt;List paragraph.&lt;/p&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>If you want equal vertical space between each paragraph and/or list item, then:</p>
  
  <ul>
  <li>Would you tend to define the <code>&lt;ul&gt;</code> as having zero margin+padding of its own?</li>
  <li>Or would the <code>&lt;ul&gt;</code> normally have non-zero margin, which would then have no effect because this margin will be collapsed with the margin of the <code>&lt;li&gt;</code> within it and of the <code>&lt;p&gt;</code> which precedes it?</li>
  </ul>
  
  <hr>
  
  <p>Thirdly (and I'm not sure whether I ought to ask this third question), the <a href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" rel="nofollow noreferrer">specification for collapsing margins</a> says, "If the top and bottom margins of a box are adjoining, then it is possible for margins to collapse through it." If I have an empty paragraph like the following one in the middle ...</p>
  
  <pre><code>&lt;p&gt;Hello&lt;/p&gt;
  &lt;p&gt;&lt;/p&gt;
  &lt;p&gt;World&lt;/p&gt;
  </code></pre>
  
  <p>... then I'd expect to see this as an empty paragraph, i.e. with an extra amount of vertical space between the <code>Hello</code> and the <code>World</code>:</p>
  
  <ul>
  <li>What would prevent this empty paragraph's margins from collapsing, and the empty paragraph therefore being invisible: is it non-zero padding which does this?</li>
  <li>In what scenario <strong>is</strong> it useful for a box to have adjoining top and bottom margins which collapse?</li>
  </ul>
  
  <hr>
  
  <p>Answers to any or all of these three questions would be welcome.</p>
  
  <p>I'm not especially interested in IE-specific box model problems at the moment: instead I want to know about how to use the standard.</p>