CSS: Image and Text on same line

Normally if you try to put a link using <a> tag and image using <img> tag it does not appear on the same line. In order to appear it on the same line please follow this guideline:

1. Use a div to wrap the image and link
• vertical-align:top;
• set the width of the div: width:100px;
2. Image:
1. float:left
2. margin:0
3. padding:0
3. Link
1. margin:0
2. padding:0

CSS:

.headerBottomLink

{

    margin:0px;

    text-decoration:none;

}

.headerBottomDiv

{

    vertical-align:text-top;

    width:100px;

}

.headerBottomLink:hover

{

    vertical-align:text-top;

    background-color:Green;

}

 HTML:

<div class="headerBottomDiv"><a href="Default.aspx" class="headerBottomLink"> View cart <img src="Images/System/cart.png" class="headerBottom" /></a></div>