Ensuring Consistent Spacing Between Elements When Dealing with Varying Image Lengths

In order to clearly illustrate my need, I will provide some code here.

.wrap{
  display:flex;
  flex-direction:row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

.img{
  width: 30px;
  height: 20px;
  background: red;
}
.img1{
  width:40px;
}
<div class='wrap'>
  <div class='img img1'>
    
  </div>
  <p>
    Xxxxxxxxxxxxx
  </p>
</div>
<div class='wrap'>
  <div class='img'>
    
  </div>
  <p>
    yyyyyyyyy
  </p>
</div>
<div class='wrap'>
  <div class='img'>
    
  </div>
  <p>
    zzzzzz
  </p>
</div>

As you can see, there are 3 div and p elements. I am looking to create an equal gap between these elements. Specifically, I want to separate the red div from the text without relying on a fixed margin or padding value. Is there a more effective solution for this?

https://i.sstatic.net/YXxrF.png

htmlcss

Answer №1

To create space between the text and the red rectangle, you'll need a container that sets the width of all children. Apply justify-content: space-between to the .wrap class and add a gap property to further separate the elements.

Below is the updated snippet with the necessary adjustments:

.container {
  display: flex;
  flex-direction: column;
  max-width: fit-content;
}

.wrap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  width: 100%;
}

.img {
  width: 30px;
  height: 20px;
  background: red;
}

.img1 {
  width: 40px;
}
<div class="container">
  <div class='wrap'>
    <div class='img img1'>

    </div>
    <p>
      Xxxxxxxxxxxxx
    </p>
  </div>
  <div class='wrap'>
    <div class='img'>

    </div>
    <p>
      yyyyyyyyy
    </p>
  </div>
  <div class='wrap'>
    <div class='img'>

    </div>
    <p>
      zzzzzz
    </p>
  </div>
</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

problems with implementing nested columns in Bootstrap

I'm dealing with a container filled with nested columns. Strangely, the columns are now being displayed one after the other instead of side by side. I've been trying to figure out what's causing this issue. Take a look at my attempt to solv ...

csshtmltwitter-bootstrapbootstrap-4

Is it Possible to Customize the Appearance of a Broken Link Using CSS?

Can you change the color of broken links on your site to distinguish them from working ones? For example, making working links blue and broken links red. If CSS is not an option, is it possible to use JavaScript to detect broken links and style them diffe ...

javascripthtmlcss

Having trouble with some JS and Jquery codes not functioning properly in IE until the page is refreshed a few times. Any suggestions on how to fix this issue?

My code seems to be experiencing issues in Internet Explorer where some of the JS and jQuery codes are not functioning correctly initially, but start working after refreshing the page a few times. Any thoughts on why this could be happening? Here is the ...

javascriptjqueryhtml

Is it possible to arrange elements in CSS based on their attribute values?

I need to arrange a list of images in ascending order based on the index attribute using CSS. The challenge is that the index values will change dynamically and new images will be added through Ajax, so I want them to automatically update in the correct or ...

htmlcssimagesorting

Faux CSS, every other moment appears to be unsuccessful

My HTML code looks like this: <div class="container"> <div class="foo">Foo!</div> <!-- if this is red... --> <div class="bar">Bar!</div> </div> <div class="container"> <div class="foo">Foo! ...

csscss-selectorspseudo-class

Displaying variables in JavaScript HTML

<script type ="text/javascript"> var current = 0; </script> <h3 style={{marginTop: '10', textAlign: 'center'}}><b>Current Status: <script type="text/javascript">document.write(cur ...

javascripthtml

Issue with accessing and manipulating HTML elements in an .asp page using WebBrowser

This is for a Desktop C# app in Visual Studio Express 2012. When using a webBrowser control to logon to various websites, I encountered an issue with a specific website where the logon attributes are on an .asp page called by the HTML. Despite my efforts, ...

c#htmlasp.net.netwebbrowser-control

`Count the number of rows needed to accommodate text line breaks within a div element`

Is there a method to determine the number of lines that text breaks into using the CSS property word-break: break-all? For example, if I have a div like this: <div>Sample text to check how many lines the text is broken into</div> And the corr ...

javascriptjqueryhtmlcsshyphenator

Enable a single column to scroll until the content is fully displayed, and then stay in a fixed position

My HTML content consists of two columns, with the first column being a sidebar that should have limited content. The second column holds the main content and can span several pages. The desired functionality is for the first column to scroll until the end ...

htmlcss

Attempting to customize react-bootstrap styling within a NextJS application

I'm currently working on a project using Next.js and attempting to integrate Bootstrap as the CSS framework. After installing react-bootstrap into the project, I proceeded to create the navigation bar. My goal is to assign an '.active' class ...

cssreactjsnext.jsreact-bootstrapbootstrap-5

Prevent iPhone from automatically changing phone numbers to grey text color

For some reason, the iPhone keeps changing the phone numbers on my site to grey, despite using Drupal 7. I've heard that this is because the iPhone wants to make them stand out for users to interact with. I tried adding the following code to the head ...

htmlioscss

Error with Unexpected Token HTML found in IBM Domino Web application

Currently working on an outdated IBM Lotus Domino web application that does not utilize XPages. The page is consistently encountering HTML errors related to the following line of code: <tr valign="top"><td width="20"><img width="1" height= ...

htmllotus-dominolotus

The floating label appears distorted when used with a datalist input in Bootstrap 5

How can I get the floating label to display correctly for datalists in Bootstrap 5? Currently, it looks like this... It's working fine without the form-floating class, but I want to use the floating form feature. <div class="form-floating" ...

htmlcssfrontendbootstrap-5web-frontend

Changing the position of an image can vary across different devices when using HTML5 Canvas

I am facing an issue with positioning a bomb image on a background city image in my project. The canvas width and height are set based on specific variables, which is causing the bomb image position to change on larger mobile screens or when zooming in. I ...

javascriptcsscanvascordovahtml5-canvas

Displaying XML data in an HTML table

Encountered a challenge while fetching data from an external XML document using JS. Following the w3schools tutorial for AJAX XML, but faced an issue I couldn't resolve. The XML structure is as follows: <root> <document-id> <author ...

javascripthtmljqueryajaxxml

The functionality of the button is currently not compatible with Internet Explorer

I have encountered an issue in my application involving a combination of <h:outputLink> and <p:commandButton> as shown below: <h:outputLink target="_blank" value="theURL"> <p:commandButton value="Click" type="button" /> </h: ...

htmlinternet-explorerbuttonjsf-2primefaces

The shading of the box isn't displaying the correct color in Microsoft Edge and IE 11

I have a unique pattern consisting mainly of white and grey hues. To add a touch of color, I am using the box shadow property in CSS to apply a blue filter effect. This technique successfully displays the desired result in Firefox and Chrome browsers. Howe ...

cssinternet-explorermicrosoft-edge

The overflow:hidden property seems to be completely ineffective

Recently, I encountered an issue with my small HTML and CSS script. Everything was functioning properly until, out of nowhere, a scroll bar appeared on my page even though I had set overflow to hidden. I'm puzzled as to why this scroll bar is showing ...

htmlcss

Steer clear of utilizing CSS pseudo-elements like :before and :after

I am seeking a solution to hide a <label> when viewing on a small mobile device. Below is the HTML code: <label class="page_createpassword_label" for="page_createpassword"> <span class="page_label_main">Span Text</span> <span c ...

csscss-positionpseudo-element

Angular: How to restrict the compilation of rgba() to #rrggbbaa in your codebase

There are some browsers that do not support #rrggbbaa but do support rgba(). However, in my Angular project, background-color: rgba(58, 58, 58, 0.9) in common.css was compiled to background-color:#3a3a3ae6 in style.[hash].css. How can I prevent this co ...

cssangular