Question

I have to go from a) to b) : https://i.stack.imgur.com/9hWxJ.png
(the green stock-image is from a sprite)

I’m having following HTML-code:

    <p class="stock"><span class="img"></span>in stock</p>

And following CSS-code:

   p span.img {
       display:inline-block;
       width: 14px;
       height: 17px;
       padding-right: 5px;
       background: transparent url(images/page1/tho_main_sprite.png) -0px -580px;
   }

   p.stock {
       font-size: 9px;
       color: #000;
   }

I tryed to give some height and line-heigt to p.stock, but no result…

Thanks a lot!

Answer 1

Maybe vertical-align could help

p span.img {
       display:inline-block;
       width: 14px;
       height: 17px;
       padding-right: 5px;
       background: transparent url(images/page1/tho_main_sprite.png) -0px -580px;

       vertical-align: bottom;
   }