Member Avatar for dartiss

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?

Thanks,
David.

  • 3 Contributors
  • 5 Replies
  • 91 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by soapyillusion
Member Avatar for JorgeM

Have you tried to set a margin on the image elements?

Member Avatar for 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.

Member Avatar for dartiss

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?

Member Avatar for JorgeM

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

Member Avatar for soapyillusion

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.