Use CSS to remove the space between images

html

responsive-design

css-grid

flexbox

byAnton Shumikhin·Dec 10, 2024

To ditch that annoying space between images, apply the CSS rules: display: block; and margin: 0; directly to your <img> tags. The images will fall in line and behave as block-level elements with zero margin. Here's how you do it:

img {
  display: block; // Who you gonna call? Block-busters!
  margin: 0; // No room for extra space here.
}

The result? Images side by side, snuggled up like they were lost best friends.

Targeted attack: CSS rules specific to your needs

Let's deep dive into some further CSS techniques that can give you advanced control over your image spacing.

Parental Controls: Font Size and Container Styling

For some CSS properties, parenting comes first. You can silence the residual spaces by applying font-size: 0 to the parent container. Remember to bring back the original font-size for any textual content your container might adopt.

The Good Line: Mixing Display property with Inline-block

When setting up display: inline-block;, keep in mind that unwanted white spaces can pop in due to spaces in the HTML code. Here are some tips to make them behave:

Whitespace ghosting: Delete any unwanted spaces between img tags in the HTML markup.
Margin magic: Use a slight negative margin to pull your pictures together.
HTML comments can save the day: Make your code tighter .

Floating away: Handling floats and clears

It's nice to float, until you're not in the right flow. Floating images left (float: left;) can help eliminate spaces. Remember to clear your floats, though, or you could have some surprising layout changes. Don't forget about newer techniques like flexbox or grid, they offer more control over spacing.

The new kids on the block: CSS grid and Flexbox

Modern layout features like CSS Grid and Flexbox are tailor-made for flexibility and space management by providing advanced alignment features.

Mastering the universe with CSS Grid

Create a grid layout and place items exactly where you want with CSS Grid. The grid-gap is 0 hence no space is wasted between the grid items.

.container {
  display: grid;
  grid-gap: 0; // Spy level stealth mode.
}

.container img {
  // These images obey their parent. Good kids!
}

Flexbox: The cool kid that won't space out

Flexbox is handy when it comes to removing unnecessary space among items while keeping alignment perfect.

.container {
  display: flex;
  justify-content: space-between; // Flexing my jigsaw puzzle fitting skills
  align-items: center; // Who said pictures can't sit straight?
}

.container img {
  // Individual adjustments! Handle with care.
}

Aging fine but acting up, older browsers

Now, modern browsers are versatile and rule abiding. But we also have to deal with some difficult seniors in the form of older versions. Beware:

Wasted Spaces: Ensure that display: inline-block; elements have no lurking spaces in the markup.
Clearfix Hacks: Use clearfix to provide proper behavior for your floats.

Proceed with caution: Pitfalls to avoid

CSS is not always fun and games. There are traps to watch out for:

Overflow Trouble: Overflow can be a game spoiler. Consider experimenting with alternate layouts or scroll options if your images insist on sticking out.
Wrapping Secrets: The white-space: nowrap can be both a blessing and a curse. It can prevent wrapping but might also lead to horizontal scrolling. Use judiciously.
Reset that Size: Remember to reset the font size for elements containing text if you have been using font-size: 0.