Removing breaks between three different <div>

Anki Card Design
2

These containers likely have a margin or padding greater than 0. Linebreaks in-between your tags don’t affect the spacing (<br> tags would do that).

You could give these divs a common class, like image-container:

<div class="image-container" id="tumblr-image"></div>
<div class="image-container" id="google-image"></div>
<div class="image-container" id="bing-image"></div>

and style it the following way:

.image-container {
  display: inline-block; /* remove if you want them to be on separate lines */
  margin: 0;
  padding: 0;
}

Or just use <span> instead of <div>.

This might cause your images to be stuck together without space between them, so you could give images inside the image-container a margin:

.image-container img {
  margin: 0.5rem;
}

You could also consider a flex layout, if you want it to be responsive to your screen space.

3 Likes