Vertical spacing of block elements - html

Question

I'm arranging a couple of block level elements next to an image and have used the following HTML/CSS to position everything:
<style>
#logo p {
font-size: 24px;
margin-left: 220px;
margin-top: -27px;
}
#logo img {
position: absolute;
top: 10px;
}
#logo #a {
padding-top: 43px;
}
</style>
<div id="logo">
<p id="a">Label A</p>
<p id="b">Label B</p>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/IBM_logo.svg/200px-IBM_logo.svg.png" />
</div>
(Editable version here: http://jsfiddle.net/49cAv/1/)
To get the two P elements closer I've used a combination of margin-top: -27px; and padding-top: 43px; which seems a bit clunky.
Is there a better / cleaner way of doing this?

Answer 1

Here is my solution:
html
<div id="logo">
<div id="imgCont">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/5/51/IBM_logo.svg/200px-IBM_logo.svg.png" />
</div>
<div id="labelCont">
<p id="a">Label A</p>
<span style="clear:left"></span>
<p id="b">Label B</p>
</div>
</div>
css
*{
padding:0;
margin:0;
}
#logo p {
font-size: 24px;
}
#logo img {
position: relative;
}
#imgCont{
float:left;
}
#labelCont{
float: left;
padding: 15px;
}
fiddle