Member Avatar for Member #319957

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
  • 105 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by soapyillusion

Dani AI

Generated

— the simplest, most robust fix is to treat each image as a grid/flex item (or an inline-block) and add spacing on the items, not on the outer wrapper. was right to think about margins, but margin rules on inline elements can be surprising; and ’s idea of making each image its own block is on the right track, but floats add extra complexity. Two reliable options follow.

Modern, clean solution (best when targeting current browsers): make the container a flex row that wraps and use the gap property so rows and columns get consistent spacing automatically.

<div class="gallery">
  <span class="item"><img src="..."></span>
  ...
</div>

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* keeps the whole group centered */
  gap: 10px;              /* horizontal + vertical gaps between items */
  margin-bottom: 20px;    /* keeps your overall bottom margin */
}

Fallback if you need wider legacy support: use display:inline-block on each item and give them a bottom margin for vertical spacing. Also make images display:block so the image’s own inline whitespace/descent doesn’t create odd gaps.

.item { display: inline-block; margin: 0 10px 10px 0; vertical-align: top; }
.item img { display: block; }

Quick troubleshooting: if margins “don’t apply” inspect the computed display and specificity in devtools; if gap seems ignored check browser compatibility (older browsers lacked flex gap). See MDN for details on flex wrapping and gap: flex-wrap and gap.

Recommended Answers

All 5 Replies

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 Member #319957

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.