title: space before heading larger than space after heading with HTML and CSS
body: <p>In renderings of HTML code like</p>
  
  <pre><code>&lt;p&gt;Paragraph 1.&lt;/p&gt;
  &lt;h3&gt;Heading&lt;/h3&gt;
  &lt;p&gt;Paragraph 2.&lt;/p&gt;
  </code></pre>
  
  <p>I would like to have slightly more vertical space before the heading than after the heading. Reason: the heading should semantically belong more to the second paragraph than to the first one. Of course, both space values should exceed the usual interline-spacing. The exact amount of space and the way to render it (if the client decides to render the vertical space at all) should be left to the client (browser, Braille device, printer, speech engine ...) to create a pleasant output.</p>
  
  <p>My best try so far for my machine is</p>
  
  <pre><code>&lt;p style="margin-bottom:3ex"&gt;Paragraph 1.&lt;/p&gt;
  &lt;h3&gt;Heading&lt;/h3&gt;
  &lt;p&gt;Paragraph 2.&lt;/p&gt;
  </code></pre>
  
  <p>However, I'm feeling uncomfortable in hardcoding the exact value as it might probably look well for similar setups as my machine, but not universally. Any better suggestions with HTML and CSS? (If possible, don't use more stuff than HTML and CSS: I'd like my page to be intelligible for as many clients as possible.)</p>
  
  <p>In essence, I wish the to have an HTML+CSS solution whose effect on spacing before/after the heading is roughly the same as that of the following pseudocode:</p>
  
  <pre><code>if(vertical_space_before &lt;= vertical_space_after) {
    mean_vertical_space := (vertical_space_before + vertical_space_after)/2;
    vertical_space_before := 1.1*mean_vertical_space; 
    vertical_space_after := 0.9*mean_vertical_space;
  }
  </code></pre>