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:

https://i.sstatic.net/3Wtoo.png

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

Conflict between multiple jQuery files

Currently, I am in the process of creating a test website for an upcoming project. However, I have encountered some issues with jQuery. This is a static HTML5 website that includes a social widget. The problem arises when I remove a particular jQuery lin ...

javascriptjqueryhtml

Dual-Language Dublin Core Metadata for Document Description

If I want to express the document title in two languages using Dublin Core, how can I do it? Based on my research, I could do the following: <meta name="dc.language" content="en"> <meta name="dc.language" content="fr"> <meta name="dc.title ...

htmldublin-core

I can't seem to figure out why this isn't functioning properly

Upon examining the script, you'll notice the interval() function at the very bottom. The issue arises from bc-(AEfficiency*100)/5; monz+((AEfficiency*100)/5)((AFluencyAProduct)/100); For some reason, "bc" and "monz" remain unchanged. Why is that so? T ...

javascripthtmlcssintervals

Struggling with a JQuery function that fails to perform addition

I'm experiencing an issue with my code where the math doesn't add up when trying to sum values under the venting selection. Instead of adding up, it just displays as text. I have an event set up that should populate the values upon selecting valu ...

jqueryhtmlfunctionjquery-mobile

Tips for displaying backend error messages on the frontend

I am facing an issue with returning error messages from the backend to the frontend in my Angular project. The specific requirement is to display an error message when the value of msisdn is not eligible for renewal. Currently, the hardcoded error message ...

javascripthtmlangulartypescriptvalidation

Quick question about utilizing Ajax with spans

<span name = "menu"> <!-- javascript here --> <!-- content loaded via ajax --> </span> <span name = "content"> <!-- content loaded via ajax --> <!-- updated by buttons from the menu--> </span> Seeking a ...

javascriptajaxhtml

Convince me otherwise: Utilizing a Sinatra API paired with a comprehensive JS/HTML frontend

As I embark on the journey of designing a social website that needs to support a large number of users, I have come up with an interesting approach: Implementing Sinatra on the backend with a comprehensive REST API to handle all operations on the website ...

javascripthtmlrubysinatraweb

What is the correct way to write this unusual '<a>' tag markup using Pug language?

For a list of additional features and functionalities, click here. I'm attempting to write the above in Pug format. I've tried translating it directly from HTML, but it's not displaying correctly. Below is my attempt: li For more features ...

htmlvue.jswebnuxt.jspug

Does altering HX-GET in JavaScript have no impact on the outcome?

I need assistance with implementing HTMX in my FastAPI application that uses Tailwind and MongoDB for the database. Here is the form I am working with: <form id="currencyForm" hx-get="/currency_history_check/EUR" hx-target="#re ...

javascripthtmlfastapihtmx

Retrieve information from a JSON script using C#

I need to extract data from a homepage, but the information I'm looking for is embedded in a JSON script. How can I retrieve this value? For example: <div id="contentWrap"> <div id="contentTextWrap"> <div id="contentText ...

c#htmljson

What is the method for designing a relative layout that organizes elements horizontally?

Can you tell me why elements are typically arranged vertically in a column? Is it feasible to change their orientation and display them horizontally, like in a row instead of a column? ...

htmlcss

Sending multiple forms at once with a single submission

I've been racking my brain trying to determine the feasibility of a particular task. I am currently utilizing zen-cart as my shopping cart software, but what I really want to achieve is creating a hardcoded page featuring a list of 7-9 products. Each ...

javascriptjqueryformshtml

How can one element be made to rely on the presence of another element?

I'm currently working on my portfolio website and encountering an issue. Whenever I hover over an image of a project, the image expands in size, becomes less transparent, and a description of the project pops up. However, I would like to include a lin ...

javascripthtmlcss

Switching the Vue image on Routerlink's isExactActive feature

Is there a way to display different images based on whether a link is active or not? <router-link to="/"> <img src=" :active = isExactActive ? pic_active.png : pic_inactive.png}}" /> //Something along these lines ...

htmlvue.jsrouterlinkrouterlinkactive

Bootstrap for a more streamlined container

https://i.sstatic.net/fJ8nt.png My Bootstrap setup includes a container-fluid with multiple cards inside. I want to adjust the container layout to stack the cards more closely together in a vertical direction, instead of being displayed in a grid format. ...

html

Performing an AJAX request inside of another AJAX request

I have integrated buttons into my website that are activated by JS AJAX loads. By clicking on these buttons, a JavaScript function is executed to load the contents of a PHP file into a specific div element. This setup is crucial as I want to avoid the enti ...

phpjavascripthtmlajax

using jQuery to show a block element

I'm attempting to determine whether a div with the style display as block then perform an action. Here is an example: This is just an idea I'm trying to implement using jQuery. if ($("#toshow").css("display") == "block"){ }else{ } ...

jqueryhtml

Styles created using makeStyles in MUI are no longer working properly following an update to both MUI and React versions

Implementing the MUI Dropdown in a components library. When testing the library in Storybook, everything functions properly. However, when integrating the component into a separate React project, the layout becomes distorted. The Dropdown label is posit ...

cssreactjsnpmmaterial-uimakestyles

Error with Bootstrap Layout caused by the StringBuilder

After diving into Bootstrap, I encountered an issue with the layout generated by a VB.NET page using StringBuilder. The result was a disorganized mess: Upon further inspection, it became evident that the problem extended to other sections of the page as w ...

htmlcssvb.nettwitter-bootstrap

Is there a way to turn off vue.js transitions specifically for testing purposes?

I'm utilizing a vue.js component with the <transition> element for show/hide animations. However, I want to disable the animation for faster testing. How can I achieve this? The solution proposed is * { transition: none !important } in this lin ...

javascriptcssanimationvue.jsvuejs2