Removing breaks between three different <div>

Hey all!
So I was wondering if it’s possible to have <div>'s not create a page break.
I have three divs which show me three different sets of images, and all three together create a break between the last image and the first image of the next <div>.

<div id="tumblr-image"></div>

<div id="google-image"></div>

<div id="bing-image"></div>

Is my pressing enter after each </div> somehow the problem? I removed the enter and it still happens.
This creates unnecessary space between the three divs and I study on a small screen notebook.
Is there anything I can do to mitigate this?
Thanks!

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