CODEWITHSUNDEEP
htmlcss
Hanzo-Hasashi
Hanzo-Hasashi

Reputation: 1

How can I reduce space between images when using <figure>?

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>

Upvotes: 0

Views: 483

Answers (3)

F. M&#252;ller
F. M&#252;ller

Reputation: 4062

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>

Upvotes: 1

moonwave99
moonwave99

Reputation: 22817

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>

Upvotes: 0

Kathara
Kathara

Reputation: 1290

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>

Upvotes: 0

Related Questions