title: <span> and <ul> vertical alignment
body: <p>I have a <code>&lt;span&gt;</code> element followed by a horizontal <code>&lt;ul&gt;</code> element. Why is there a left and bottom margin on the <code>&lt;ul</code>>? How can I remove this space?</p>
  
  <p><a href="https://jsfiddle.net/bpy8w8uy/" rel="nofollow">jsfiddle</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;span&gt;AAAAA&lt;/span&gt;
  &lt;ul&gt;
      &lt;li&gt;BBBBB&lt;/li&gt;
      &lt;li&gt;CCCC&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>body {
    background-color: #000;
    margin: 0;
    padding: 0;
  }
  
  span {
    background-color: #f00;
  }
  
  ul {
    background-color: #0f0;
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  ul &gt; li {
    float: left;
    padding-right: 1em;
  }
  </code></pre>