stephband / jquery.event.swipe

jQuery custom events swipeleft, swiperight, swipeup and swipedown
stephband.info/jquery.event.swipe
446 stars 180 forks source link

Strange padding/margin around slides when img tags are on separate lines in markup #7

Closed o-l-e closed 11 years ago

o-l-e commented 11 years ago

Hi,

for some reason when i change the markup in your demo from this:

<img class="img_slide slide active" id="slide1" src="image.png"/><img class="img_slide slide" id="slide2" src="image.png"/><img class="img_slide slide" id="slide3" src="image.png"/>

to this:

<img class="img_slide slide active" id="slide1" src="image.png"/>
<img class="img_slide slide" id="slide2" src="image.png"/>
<img class="img_slide slide" id="slide3" src="image.png"/>

a strange margin/padding/border gets added on the sides of the image slides.

I found that when the < img > tags had no space or line breaks i works fine, but when i add my own line by line, the slides go all offset and weird.

Is this a bug, or is it supposed to be like this?

Thanks for great work!

stephband commented 11 years ago

On my demo, I use display: inline-block; to show the slides horizontally. If you put spaces between them, spaces will render and break the layout. Don't put spaces between them.

If you want images on separate lines without spaces, this is valid html:

  <img src="..."
/><img src="..."
/><img src="..."
/><img src="..." />