Bollate

HTML

[ANSWERED] html – How can I reduce space between images when using
?

By

Nov 18, 2022 ,

Solution 1 :

Figure has a margin of 16px applied. You can adjust the margin, if it is that, what you want:

.container3 {
  width: 1000px;
  height: 600px;
  box-sizing: border-box;
  border: 1px dashed black;
}

.container3 figure {
  display: inline-block;
  box-sizing: border-box;
  margin: 0;
}
<div class="container3">
  <figure>
    <img class="image" height="200px" width="300px" src="/images/img-berryblitz.jpg" alt="berry blitz">
    <figcaption>
      Fall Berry Blitz Tea
    </figcaption>
  </figure>
  <figure>
    <img class="image" height="200px" width="300px" src="/images/img-spiced-rum.jpg" alt="spiced rum">
    <figcaption>
      Spiced Rum Tea
    </figcaption>
  </figure>
  <figure>
    <img class="image" height="200px" width="300px" src="/images/img-donut.jpg" alt="donut">
    <figcaption>
      Seasonal Donuts
    </figcaption>
  </figure>
</div>

If you want to distribute the available space evenly between the images, you can use flexbox and use justify-content: space-between:

.container3 {
  display: flex;
  justify-content: space-between;
  width: 1000px;
  height: 600px;
  box-sizing: border-box;
  border: 1px dashed black;
}

.container3 figure {
  display: inline-block;
  box-sizing: border-box;
  margin: 0;
}
<div class="container3">
  <figure>
    <img class="image" height="200px" width="300px" src="/images/img-berryblitz.jpg" alt="berry blitz">
    <figcaption>
      Fall Berry Blitz Tea
    </figcaption>
  </figure>
  <figure>
    <img class="image" height="200px" width="300px" src="/images/img-spiced-rum.jpg" alt="spiced rum">
    <figcaption>
      Spiced Rum Tea
    </figcaption>
  </figure>
  <figure>
    <img class="image" height="200px" width="300px" src="/images/img-donut.jpg" alt="donut">
    <figcaption>
      Seasonal Donuts
    </figcaption>
  </figure>
</div>

I’ve added another snippet based on OP’s comment:

.container {
  background: tomato;
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-flow: column nowrap;
  width: 600px;
  height: 300px;
  box-sizing: border-box;
  border: 1px dashed black;
}

.row {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.row figure {
  background: #DEDEDE;
  /* or width */
  flex-basis: calc(100% * 1/3);
  /* you may use max-width: 100px; to limit the size */
  flex-shrink: 1;
  flex-grow: 0;
  box-sizing: border-box;
  height: 50px;
  margin: 0;
}
<div class="container">
  <div class="row row-3">
    <figure>Fig. 1</figure>
    <figure>Fig. 2</figure>
    <figure>Fig. 3</figure>
  </div>
  <div class="row row-2">
    <figure>Fig. 4</figure>
    <figure>Fig. 5</figure>
  </div>
  <div class="row row-1">
    <figure>Fig. 6</figure>
  </div>
</div>

Solution 2 :

inline-block elements have the “funny” way of including the whitespace after the tag. You have 2 possibilities to remove the whitespace:

  1. As @Breezer suggested add display: flex; to the parent-container.
  2. remove the whitespace in html after each figure like so:
    <figure>
        <img class="image" height="200px" width="300px" src="/images/img-berryblitz.jpg" alt="berry blitz">
        <figcaption>
            Fall Berry Blitz Tea
        </figcaption>
    </figure><figure>
        <img class="image" height="200px" width="300px" src="/images/img-spiced-rum.jpg" alt="spiced rum">
        <figcaption>
            Spiced Rum Tea
        </figcaption>
    </figure><figure>
        <img class="image" height="200px" width="300px" src="/images/img-donut.jpg" alt="donut">
        <figcaption>
            Seasonal Donuts
        </figcaption>
    </figure>

Solution 3 :

Using display: flex on the container should be enough.

Also, the <img> tag expects unitless width and height attributes (without “px”):

.container3 {
  width: 1000px;
  height: 600px;
  display: flex;
  justify-content: space-between;
}

.container3 figure {
   margin: 0;
}
  <div class="container3">
<figure>
  <img class="image" height="200" width="300" src="https://via.placeholder.com/300x150" alt="berry blitz">
  <figcaption>
    Fall Berry Blitz Tea
  </figcaption>
</figure>
<figure>
  <img class="image" height="200" width="300" src="https://via.placeholder.com/300x150" alt="spiced rum">
  <figcaption>
    Spiced Rum Tea
  </figcaption>
</figure>
<figure>
  <img class="image" height="200" width="300" src="https://via.placeholder.com/300x150" alt="donut">
  <figcaption>
    Seasonal Donuts
  </figcaption>
</figure>
</div>

Problem :

How can I adjust the space between images when using <figure>? I want to reduce the space, but for some reason I just can’t get it it to budge.

I want 3 images to sit on one row, but because I can’t reduce the space between images to allow them to fit comfortably in the div box, the 3rd is wrapping and sitting below the first two

.container3 {
  width: 1000px;
  height: 600px;
  box-sizing: border-box;
}

.container3 figure {
  display: inline-block;
  box-sizing: border-box;
}
<div class="container3">
<figure>
  <img class="image" height="200px" width="300px" src="/images/img-berryblitz.jpg" alt="berry blitz">
  <figcaption>
    Fall Berry Blitz Tea
  </figcaption>
</figure>
<figure>
  <img class="image" height="200px" width="300px" src="/images/img-spiced-rum.jpg" alt="spiced rum">
  <figcaption>
    Spiced Rum Tea
  </figcaption>
</figure>
<figure>
  <img class="image" height="200px" width="300px" src="/images/img-donut.jpg" alt="donut">
  <figcaption>
    Seasonal Donuts
  </figcaption>
</figure>
</div>

Comments

Comment posted by Breezer

add

Comment posted by KIKO Software

Are you not simply talking about the

Comment posted by G-Cyrillus

without flex, you could use

Comment posted by Hanzo-Hasashi

This worked perfectly, thank you. I think I must have been adding margin: 0; to the parent container in my frustration. How can I make two images below share the same spacing as the top 3 when using justify-content: space-around? I’ve added 2 more, but they have a lot more space due to their being more space without a 3rd pic on the second row

Comment posted by F. Müller

You must set some boundaries: Either you have to specify dimensions for the figure elements or you can let flexbox take care of the spacing and sizing (with flex-basis, flex-shrink, flex-grow). In the example I’ve provided just now, you may add multiple rows and you can treat each row individually, if you like. If the example does not help, you have to be more specific how it should behave. I’ve just made some assumptions.

Comment posted by Hanzo-Hasashi

I have a flex container 1000px in width with 3 inline images each 300px width on the top row and 2 inline images same dimensions underneath. Margin: 0; and Justify-content: space-around work perfectly for the top row, 100px of spacing to use. But with only 2 images on the 2nd row I have 400px left over which makes space-around display much larger gaps than the top row. What is the simplest way to cause the second row to have the same spacing as the top row to keep uniformity?

Comment posted by F. Müller

@Hanzo-Hasashi You cannot do it like that for n-ary items on multiple rows. You can add rows (containers with n-items) and for the second row you center it and set a max-width for the figures. There is also

Comment posted by mok_ku

you can also set the container’s font-size to 0. it will get rig of the magic white space

Comment posted by Kathara

@mok_ku nice, learned something new ^^ but means that you’ll have to set a specific font-size for e.g. the figcaption.

Comment posted by mok_ku

In this case, I guess you need to set on the

, so the magic white space will not appear between the image and the figcaption

Comment posted by mok_ku

Sorry, it should be the .container3 that need to set for the font-size: 0, so that the inline-block

will not have white space

By

Related Post

HTML

[ANSWERED] html – I can’t get my carousel buttons to respond bootstrap 4

Nov 20, 2022
HTML

[ANSWERED] javascript – Locomotive Scroll not working with Vue.js when having to load images on page

Nov 20, 2022
HTML

[ANSWERED] html – How to import/veiw STL files in a wordpress website?

Nov 20, 2022

You missed

HTML

[ANSWERED] javascript – Text box to display updated text and save on button click

Nov 20, 2022
HTML

[ANSWERED] javascript – Pass html tag to angularjs variable from controller

Nov 20, 2022
HTML

[ANSWERED] html – bootstrap mobile menu not scrolling instead the background is scrolling

Nov 20, 2022
HTML

[ANSWERED] html – How to play live stream YouTube videos using CEF4Delphi?

Nov 20, 2022