Question

I am prepending an image using to a span using .attr() and want to add a top margin to the image only. But when I add css to the jquery, it moves the entire span, not just the image. I’ve twiddled around with this for awhile, but can’t figure it out.

How can I add CSS to the prepended image only and not to the entire span?

Here’s the code.

    $("<img />").prependTo('span.album:contains("Toto")').attr({
        src: '/images/toto.jpg',
        alt: '',
        height: '24',
                    style: 'margin-top:3px;' //this moves the whole span
    });

Answer 1

When you change the margin of the image, it is increasing the height of the current line. Since the image and the span are display: inline, it will also increase the spacing above the span because they are both on the same line. Consider floating the image so that the image doesn’t increase the line height.