How to remove trailing space from marquee?

Question

I Develop a marquee which continuously moves to upward direction.

But what the exact problem is after finishing scrolling last image there is a huge gap between first image and last image. I just want to remove the trailing space which additionally add to the bottom of the last image. Is anybody help me to figure out the solution. Thanks in advance.

HTML :

<div style="margin-left:760px;border:0px;height:300px; width:265px;">
    <marquee bgcolor="transparent" scrollamount="8" direction="up" width="265px;" style="float:left; position:absolute;" loop="true" height="300px" onmouseover="this.stop()" onmouseout="this.start()">
        <img src="http://s30.postimg.org/bab6pd5wd/i05.jpg" width="220" style="z-index:11;" />
        <br>
        <img src="http://s30.postimg.org/84qkz5na5/i06.jpg" width="220" />
        <br>
        <img src="http://s30.postimg.org/nxvjfma71/i07.jpg" width="220" />
        <br>
        <img src="http://s30.postimg.org/lf9uexogt/i08.jpg" width="220" />
        <br>
        <img src="http://s30.postimg.org/g6eth261p/i09.jpg" width="220" />
        <br>
        <img src="http://s30.postimg.org/wvg9cz2n1/i10.jpg" width="220" />
        <br>
    </marquee>
</div>

What i did is just here : http://jsfiddle.net/vivekbhintade/xuwN2/13/

Answer 1

Remove the last <br> from your marquee should do it, plus check your css and make sure that there is no margin added to images there.

As others have pointed out, using the <marquee> tag is really bad practice nowadays. There are lots of very nice jquery marquee plugins if you have a look around.