I have a line of images - each image is wrapped with a <span> and the whole thing has a <div> around it to centre the whole thing and add a margin underneath the images. The site it's on is responsive - as a result, as the width is reduced the images split over multiple lines.

However, when the images split across multiple lines there is no spacing between them - the margin is around the whole group of images. What's the easist way of ensuring a gap appears between the images if they split over multiple lines?


5 Years
Discussion Span
Last Post by soapyillusion

Spans themselves don't count as new lines if you wanted each image to sit below each ther rather then using spans you could cheat and place each image in a paragraph tag. If you don't like the amount of spacing you could alter that very same tag with minor CSS.


Thanks for the replies.

JorgeM - yes, and they don't apply.

soapyillusion - this is what I was thinking. Maybe a DIV around each image and float them so that they line up?


You may be able to get more help and feedback if you post the code you are having trouble with.


Another posibility is using a an un ordered list tag and then using the css to pad them out. You can change the position to absolute then line them up in the center using margin left or right. But yes I agree you should be able to use a <div> on each or like I said just use the <p> tag.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.