Unwanted space after first element in a row

Question

I am creating a list of profiles which will be displayed based on a given category. The setup makes it inconvenient to use a container element to wrap the list items, so I'm using display:inline-flex on each item instead of a flex container with the usual justify-this and align-that.

The issue is that the first element in the row appears to have a space to the right of it, and I'm not sure why.

I'd like to display all the elements evenly, in this case 4 to a row with identical spacing, without nesting them in a parent container if possible.

// simple function to repeat html elements

$(document).ready(function() {
  let a = $('.a')[0];
  const repeats = 11;
  let count = 0;
  while (count < repeats) {
    $('body').append($(a).clone())

    count++;
  }
  //$( 'body' ).append( html );
});

.a {
  background-color: red;
  box-sizing: border-box;
  border: 1px solid green;
  display: inline-flex;
  height: 25px;
  width: 25%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>
  <div class="a"></div>
</body>

</html>

score 1 · Accepted Answer · answered May 08 '18 at 01:28

Actually now the first element (with space to the right) is one you declared in your html. Remove it from there and use instead:

// simple function to repeat html elements

$(document).ready(function() {
  let a = $('<div class="a"></div>');
  const repeats = 12;
  let count = 0;
  while (count < repeats) {
    $('body').append($(a).clone())

    count++;
  }
  //$( 'body' ).append( html );
});

.a {
  background-color: red;
  box-sizing: border-box;
  border: 1px solid green;
  display: inline-flex;
  height: 25px;
  width: 25%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>

</body>

</html>

I think the problem is that you append it to the body. You case works without changes in html if use $('body').prepend($(a).clone()) and it should be displayed as expected when you'll add nodes to div element — IP_, May 08 '18 at 01:36

Michael Benjamin · Answer 2 · 2018-05-08T16:28:20.863

1

A look at the dev tools inspector reveals a bit of invisible code between the first and second items:

When I delete those lines in the inspector, the gap is removed and all boxes line up as intended.

So it's an issue with your script appending elements. I'm not sure how you want to handle that (e.g., is the script only for this demo? is the problem only in this IDE? is removing the first element an option?), so I won't get into solutions.

edited May 08 '18 at 16:28

answered May 08 '18 at 16:17

Michael Benjamin

346,931
104
581
701

interestingly enough, I get the same results even without (to my knowledge) a script in between the 1st and 2nd elements. See this fiddle, where instead of appending to body (and thus below the script), I append to a container div: https://jsfiddle.net/45pmccm4/ – Frish May 09 '18 at 04:16
To answer your questions, the script was only for this demo. The problem was originally encountered in a notepad++ and Chrome browser setup with the same script to create multiple HTML elements. Removing the first element is not an option in production, however for the purposes of this mockup sure why not. I think I was freakin' out a little because I thought I was doing something not-quite-right with my flexboxes instead of suffering a coincidental issue! Given that the solution was "just copy and paste instead of use a script" I'm relieved but still curious about why it happened in the first – Frish May 09 '18 at 04:19
WAIT -- could it be: Because the elements are `display: INLINE-flex`, the gap is because of a `\n` character interfering? I noticed that there was a highlight-able character while mousing around, and in my search before posting there were people who suffered from this phenomenon (the whole why 4 * 25% != 100% thing).... – Frish May 09 '18 at 04:23
Not [the `inline-flex` issue](https://stackoverflow.com/a/32801275/3597276) you're referencing. I tried solving for that first. – Michael Benjamin May 10 '18 at 19:15
Ah, right. Curiously, adding `float` fixes the layout of the boxes, however I'm not sure what implications this would have in my production code (I ended up caving and using a parent div -- after all that!). For some reason float feels undesirable anyway, but I couldn't say for sure why. Maybe *that's* why! – Frish May 11 '18 at 00:08

Unwanted space after first element in a row

2 Answers2