<span> and <ul> vertical alignment - html

Question

I have a <span> element followed by a horizontal <ul> element. Why is there a left and bottom margin on the <ul>? How can I remove this space?
jsfiddle
HTML
<span>AAAAA</span>
<ul>
<li>BBBBB</li>
<li>CCCC</li>
</ul>
CSS
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 > li {
float: left;
padding-right: 1em;
}

Answer 1

Check this out!
Added inline-block to the span and vertical-align too.
The span has a visual margin / space because it is not inline-block and the ul next to it but is inline-block
Is this what you expected? Please let me know your feedback on this. Thanks!
body {
background-color: #000;
margin: 0;
padding: 0;
}
span {
background-color: #f00;
display: inline-block;
vertical-align: top;
}
ul {
background-color: #0f0;
display: inline-block;
vertical-align: top;
list-style: none;
margin: 0;
padding: 0;
}
ul > li {
float: left;
padding-right: 1em;
}
<span>AAAAA</span>
<ul>
<li>BBBBB</li>
<li>CCCC</li>
</ul>

Answer 2

As the other users already stated, display: inline-block; should do the trick, but your fiddle seems like you already got that right. To find out where unexpected margins, borders or other css stuff come from, I rely on firebug (Firefox Plugin for web developers).

Answer 3

while you are using display inline-block give font-size: 0; to the parent element.
Try this code...
body {
background-color: #000;
margin: 0;
padding: 0;
font-size: 0;
}
span {
background-color: #f00;
font-size: 14px;
display: inline-block;
vertical-align: top;
}
ul {
background-color: #0f0;
display: inline-block;
list-style: none;
margin: 0;
padding: 0;
}
ul > li {
float: left;
padding-right: 1em;
font-size: 14px;
}