Member Avatar for mangopearapples

So say I have 4 images: <img><img><img><img>
and I don't want any spacing between them so the images line up.
How can I do this?
thanks.

  • 2 Contributors
  • 2 Replies
  • 105 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by mangopearapples

Dani AI

Generated

As found, the tiny gaps between adjacent images usually come from markup/inline formatting rather than mysterious margins. 's idea of a global reset can help, but there are cleaner, more controllable options depending on the layout goal.

A modern, robust solution is to use flexbox so the images sit flush and you can control any gap explicitly:

<div class="row">
  <img src="a.png" alt="">
  <img src="b.png" alt="">
  <img src="c.png" alt="">
  <img src="d.png" alt="">
</div>

<style>
.row { display: flex; gap: 0; }
.row img { display: block; }
</style>

If you need the images to remain inline (for text flow or legacy constraints), two common tricks work well: set the parent element's font-size to zero to collapse the whitespace between inline children, then restore font size on children; or make images block-level so they no longer generate inline whitespace. Example:

.parent { font-size: 0; }
.parent img { display: inline-block; font-size: initial; vertical-align: top; }

For pure-HTML fixes, removing the literal space between tags (putting tags adjacent) or placing an HTML comment between them will suppress the gap. Also note that <img> is a void element — do not use a closing </img> — and always include meaningful alt text for accessibility. For background and deeper explanations about inline-block spacing, see the CSS-Tricks guide: Fighting the space between inline-block elements. For correct <img> usage refer to MDN: img — HTML element.

Recommended Answers

All 2 Replies

Member Avatar for Rajib Ganguly

use this way:
<div id="no-space">
<image></image><image></image><image></image><image></image>
</div>

css as follows:
#no-space {width:100%;}
#no-space image { padding:0; margin:0; float:left;}


or you may add this css on top of your style sheet
* {padding:0; margin:0;}


please let me know if any points

Member Avatar for mangopearapples

Actually, I found out that because I was doing
<img></img>
<img></img>
instead of <img></img><img</img>
So thanks.

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.