Minimize the space between flex items

I'm currently working with a <div> container styled as flex using the following CSS properties:

.icon-container {
    padding: 3px;
    padding-top: 15px;
    padding-bottom: 15px;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    border-radius: 25px;
    border: solid 2px white;
    width: 50px;
    background-color: #FFFFFF44;
}

The structure of the HTML is as follows:

<div class="icon-container">
    <img alt="icon 1" src="/images/icon1.png"><br>
    <img alt="icon 2" src="/images/icon2.png"><br>
    <img alt="icon 3" src="/images/icon3.png"><br>
    <img alt="icon 4" src="/images/icon4.png"><br>
    <img alt="icon 5" src="/images/icon5.png">
</div>

When viewed in dev tools, it appears like this:

I've been attempting to decrease the purple gaps by approximately half, but so far my changes have not had any effect.

htmlcssflexbox

Answer №1

Replace <br> with row-gap:

.icon-container {
  padding: 3px;
  padding-top: 15px;
  padding-bottom: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 25px;
  border: solid 2px white;
  width: 50px;
  background-color: #FFFFFF44;
  row-gap: 12px; /* 👈 */
}
<div class="icon-container">
  <img alt="icon 1" src="/images/icon1.png">
  <img alt="icon 2" src="/images/icon2.png">
  <img alt="icon 3" src="/images/icon3.png">
  <img alt="icon 4" src="/images/icon4.png">
  <img alt="icon 5" src="/images/icon5.png">
</div>

Answer №2

Experiment with different values for flex-grow, such as 0.8 in the example given, and adjust it gradually until you achieve a satisfactory outcome.

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

Select either one checkbox out of two available options

My form includes two checkboxes, allowing users to click on both of them. I'm wondering if it's possible to set it up so that only one checkbox can be selected at a time. For example, clicking on the first checkbox would turn it on while turning ...

javascripthtmljquerycss

How to give a stylish touch to your :after element with a css

I have a unique bubble design that pops up when hovering. I'm trying to add a border around the bubble, but I'm facing difficulty adding a border to the pointer of the bubble. The arrow is created using the .bubble:after selector. You can check ...

htmlcsscss-position

Using routerLink for linking to multiple components

Below is the anchor tag provided: <a class="uppercase" routerLink="settings/pressure" routerLinkActive="text-success" (click)="closeModal()" > <div class="pad-btm"> PRESSURE </div> </a> I need to include another route ...

htmlangulartypescriptroutesangular-routing

When the state changes, initiate the animation

Currently, I am working with Vue.js and need to animate a navigation menu. My goal is to display two li elements when a user hovers over one of the navigation buttons. At the moment, I have set the data type showActivities to false by default and changed ...

javascriptcssvue.jsanimationvue-data

Combining CSS to Align Two Form Fields Side by Side

I recently came across an online form and I'm attempting to customize it by aligning the phone and email text fields next to each other. I have made some progress, but the formatting is not quite right. The fields are too small and adjusting their siz ...

htmlcss

When the if-else statement is executed, it showcases two strings:

Learning Experience: Unveiling My Lack of Cleverness Update: It appears that utilizing PHP in my current setup is not possible. As a result, I'll take some time to contemplate while banging my head against a wall. Despite that, thank you all for your ...

phphtmlasp.net

In an HTML document, you may encounter whitespace that is not present in JSFiddle

Upon running this HTML file in my browser, I noticed that there is an 18px gap at the top of the first div. It's strange because this issue only occurs when I run the HTML locally on my browser, but everything works fine on JSFiddle. I'm puzzled ...

jqueryhtmlcss

Why isn't my custom HTML attribute displaying correctly?

In my current React app project, I have been incorporating custom attributes to HTML tags and React components for End-to-End (E2E) tests using Testcafe. However, I am facing an issue where the additional data-test="burger-menu-btn" attribute is ...

javascripthtmlreactjstestingtestcafe

Developing a dynamic table using HTML and JavaScript

I have a question that might sound silly, but I am trying to retrieve the HTML content from this particular website using JavaScript. The data I'm interested in is located at the center of the page within a dynamic table which does not change the URL ...

javascriptjqueryhtmlajax

Tips to stop scrolling when clicking on a link in a Vue.js carousel

How can I prevent the page from scrolling when clicking on a link in a Vue.js carousel? I've created a carousel card to mimic the ones found on Netflix's main page. It works fine on a single component but when I add multiple carousel components ...

htmlcssvue.js

Google Chrome users may experience unexpected position changes in jQueryUI modal dialog when dragging

Chrome version 26.0.1410.64 jQuery version 1.7.1 jQueryUI version latest The web app is created using asp.net webforms When the page is at the top, the dialog opens normally and functions correctly. However, if the page is scrolled down and the di ...

cssjquery-uigoogle-chromewebformsjquery-dialog

What is the best way to send data to a child component in Angular, including components that can be

There are two components in my project: the parent component and the child component, each with their own unique markup. It is crucial for this example that the child component fetches its own data to render and not be provided by the parent. Currently, th ...

htmlangularrendering

Database storing incorrect date values

After successfully displaying the current year and month in a textbox, an issue arises when submitting the data to the database. Instead of the expected value from the textbox, it defaults to 2014. What could be causing this discrepancy? function YearM ...

javascriptphpjqueryhtmlmysql

Discover the technique of accessing HTML/CSS toggle switch value in Golang

I am attempting to incorporate a toggle switch into my webpage. I followed this specific tutorial for guidance: w3schools.com Currently, I have set up my HTML file with a button and the toggle switch. Additionally, I configured my web server in Go to lis ...

javascripthtmlcssgo

Using HTML and JavaScript to add variables into the URL within the window.location

I have been struggling to incorporate longitude and latitude into the URL. Despite researching various topics online, I have not found a solution that works for me. Below is the HTML code that showcases the issue. When you click the "Show Position" button ...

javascripthtml

Focus on selecting the first child <li> element that contains an <a> tag within it

Struggling a bit with selecting only the first child within a li tag that contains a link. HTML: <ul class="dropdown-menu" role="menu" aria-expanded="true"> <li role="presentation" class="dropdown-header">Label</li> <li><a ...

javascriptjqueryhtml

Issue with loading CSS and JavaScript following a GET request

I initially used express and the render function to display different pages on my website. However, I've now decided to switch to vanilla JavaScript instead. The objective is to load the HTML file along with all the necessary JS and CSS files. Below i ...

javascripthtmlcssnode.jshttp

Implementing a PHP form for seamless image uploads

I have been attempting to upload a form that includes an image. I have successfully retrieved the data for the brand name and other fields. However, I am encountering an issue with retrieving the image name and type. Can someone please assist me in ident ...

phphtml

Creating a Custom "Save As" Dialog in HTML5 and JavaScript for Downloading Files

I have developed a NodeJS/Express application that is capable of generating and downloading an Excel document (created using ExcelJS) when a user clicks on a button. Currently, the file gets automatically downloaded to the default download location of the ...

javascripthtmlnode.jsexpressexceljs

Material UI makes it possible for the ToggleButtonGroup to maintain a consistent fixed size regardless of its content

Seeking a solution to ensure consistent button sizes, even when they have no content. The desired size is displayed below, functioning properly as long as the top and bottom buttons contain some content: https://i.stack.imgur.com/5zVNM.png When the midd ...

reactjsflexboxmaterial-ui