title: Why does margin-top work with inline-block but not with inline?
body: <p>In the code below, I am trying to get the h1 element to have a top-margin. When I set the position to inline in the css, the margin-top doesn't show up. But when I change it to inline-block, it does. I am wondering if somebody can explain why this is the case. Thanks.</p>
  
  <p>EDIT: Here's the code in jsfiddle: <a href="http://jsfiddle.net/pjPdE/">http://jsfiddle.net/pjPdE/</a> </p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
    &lt;head&gt; 
       &lt;link rel="stylesheet" type="text/css" href="MyFirstWebsite.css"&gt; 
       &lt;title&gt; 
         Max Pleaner's First Website
       &lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;Welcome to my site.&lt;/h1&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And here's the CSS</p>
  
  <pre><code>body {
      background-image:url('sharks.jpg');
      }
  
  h1 {
      background-color:#1C0245;
      display:inline;
      padding: 6.5px 7.6px;
      margin-left:100px;
      margin-top:25px;
  }
  </code></pre>