Adding vertical-align: middle; to #hello ul will get rid of the undesirable "padding" at the bottom.
http://jsfiddle.net/xarq5/1/
The default vertical-alignment is usually baseline, which refers to the bottom edge of letters that don't have descenders ("a" or "B" do not have descenders, but "y" or "g" do). The fiddle below makes it a little more obvious where the undesirable "padding" is coming from. It isn't padding at all, but space reserved for the text's descenders.
http://jsfiddle.net/xarq5/11/
p {
border: 1px solid;
}
p.aligned img {
vertical-align: text-bottom;
}
<p>Something texty <img src="http://placehold.it/50x50" /></p>
<p class="aligned">Something texty <img src="http://placehold.it/50x50" /></p>
If the problem is undesirable spacing that happens between inline-block/inline-table elements and you don't want your source to look like a giant run-on sentence, then you can use comments.
<ul>
<li>a</li><!--
--><li>b</li>
</ul>
