What methods can I use to minimize the gap between images within the <figure> element?

   

Is there a way to adjust the spacing between images when using <figure>? I've been trying to reduce the space, but I can't seem to make it work.

I want to display 3 images side by side in one row, but because I'm struggling to decrease the space between them, the third image is wrapping and appearing 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>

Answer №1

There is a margin of 16px applied to the figure. You have the option to adjust this margin if you prefer:

.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 wish to evenly distribute the available space between the images, you can utilize flexbox and apply 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>

An additional snippet has been included based on the original poster'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>

Answer №2

When dealing with inline-block elements, it's important to note that they have a unique way of handling whitespace after the tag. There are a couple of options you can explore to address this issue:

  1. To eliminate the whitespace, one approach is to follow @Breezer's recommendation and add display: flex; to the parent container.
  2. Another option is to manually remove the whitespace in the HTML code after each figure element, as shown below:
<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>

Answer №3

To achieve the desired layout, simply apply display: flex to the container.

Additionally, ensure that the <img> tag has unitless values for the width and height attributes (e.g., use "200" instead of "200px"):

.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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Difficulty replicating 3 input fields using JavaScript

Combining the values of 3 input fields into 1 Displaying 'fname mnane lname' in the fullname input field. Then copying the fullname value into another input field called fullname2. Check out the code below for both HTML and JavaScript implemen ...

Colorbox scalePhotos function malfunctioning

The scalePhotos option in Colorbox does not seem to be working correctly for me. I have tried various methods to set it, including initializing Colorbox using the following code snippet right before the closing </body> tag in my HTML: jQuery('a ...

Unable to set DIV width to 100% and show a scrollbar

I am facing an issue with the width of a DIV element on my webpage. Despite setting it to 100% width, it only takes up the visible window's width and not the full page width, especially when a horizontal scroll bar is displayed. Below is the HTML cod ...

Opening the Gmail app from a link using JavaScript

What is the best way to open the Gmail app from a hyperlink? This link opens WhatsApp <a href="https://wa.me/">whatsapp</a> <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6a1f190f ...

Mobile Safari is having troubles loading CSS

After a long time of using in-line CSS directly on the page, I finally decided to consolidate it all into one file for my own sanity. Initially, I attempted the standard <link rel="stylesheet" href="URL"> approach and it loaded successfully, alt ...

Issue with Dropdown Menu functionality while using multiple dropdown options

I am currently experimenting with dropdown menus from W3Schools and have encountered an issue when trying to implement two dropdown options. The code works fine for a single dropdown, but when I try to add a second one using GetElementsByClassName instead ...

Create paper "cut" borders using HTML canvas or pseudo-elements

As a designer with a penchant for pain, I am striving to achieve an "art nouveau" aesthetic on paper for my NextJS project with MUI as the main design solution. Despite the abundance of CSS in the background, I am faced with the challenge of creating inner ...

I would like to embed the HTML page within the specified div element

When attempting to load a HTML page inside the div, I encountered the following issue: <a href="#1" title="" class="base-banner" page="www.google.com for example"> <img src="images" alt=""></a> <div id="landingpage"> </div> ...

Displaying content conditionally - reveal a div based on user selection

I have a dropdown menu and need to determine whether to display a specific div using the value selected via v-if. <select class="custom-select custom-select-sm" id="lang"> <option value="1">English</option> <option value="2">Sv ...

Scrolling on an iPhone's Div

When I tried to access a website () using my iPhone and other gadgets, I encountered an issue with scrolling through the content. Clicking on the "Insight" link at the top-left corner led me to another page. On a computer, I had no trouble scrolling smoo ...

Printing without page borders

Is there a way to prevent the border on my pages from being printed? I've tried various solutions without success. Here is the code I am currently using: CSS: #pagy2 { background: #f3fff3; border:1px solid #c9dbab; width: 100%; margi ...

When attempting to retrieve the innerHTML of a <div> element within a <Script> tag, the value returned is undefined

Utilizing a masterpage to create a consistent header across all content pages, I encountered an issue on one page. I needed to retrieve the innerHTML of a div element and pass it to an input control on the same page in order to access the updated innerHTML ...

How can I prevent the jQuery animation from moving elements by adjusting the border?

I've been working on a small jQuery script that animates the border of images when hovered over. However, I've run into an issue with unwanted repositioning of adjacent images due to the border width increase. $(document).ready(function(e) { ...

trigger a border hover effect on an HTML element

Is it possible to attach a mouseover event specifically to the left border of a div element in HTML? The div serves as a container for various other intricate HTML elements, each with their own mouseover events. While binding a mouseover event to the enti ...

In JavaScript or jQuery, what is the most optimal method to swap out all instances of a specific string within the body content without altering the rest of the body text?

Is there a way to replace specific occurrences of a string within a web page's body without disrupting other elements such as event listeners? If so, what is the best method to achieve this? For example: Consider the following code snippet: <body ...

Challenges encountered with Material-UI elements

Attempting to implement the http://www.material-ui.com/#/components/drawer (Docked Example) component from Material-UI in conjunction with ReactJS. An error is encountered with the "=" sign in this line: handleToggle = () => this.setState({open: !this ...

PHP dropdown menu is a dynamic feature that provides users

Can anyone help me identify the issue with this code? I am struggling to display the sub menu... I suspect the problem lies in the section where I retrieve the sub menu from the database. However, upon inspection, everything seems correct... It's po ...

PHP prepared statements do not seem to be effectively updating or inserting entire datasets

My website allows members to create and update posts using a text editor. However, I've run into an issue when the post content includes new lines or spaces such as <p>&nbsp;</p> or <div>&nbsp;</div>. The problem arises ...

When using WYSIWYG editors, be on the lookout for empty paragraphs and incorrect code in CSS, JavaScript, and

I am currently in the process of redesigning a website for a client. The site is already built using Joomla 1.7, but I am facing an issue with the articles section that was created by the client using a WYSIWYG editor. The problem lies in the messy code st ...

Removing a section of HTML from an EmailMessage Body in EWS

Is there a way to remove certain parts of the EWS EmailMessage .Body.Text value in C# before replying with a ResponseMessage? The elements that need to be removed include clickable and non-clickable buttons in HTML format. Since custom tags cannot be dec ...