unwanted space between divs when theres no margin

Question

there are boxes that let you upload images and the add box adds more image upload boxes. when added more boxes it gets wraped but there's a space in between that i can not remove.Thanks for the help

heres the html css and js:

const container = document.querySelector('.container')
const add = document.getElementsByClassName('add')

function addMore() {
  container.innerHTML += `
    <div class="box upload">
        <div class="cir">
            <i class="fa-solid fa-upload fa-2xl" style="color: #ffffff;"></i>
        </div>
    </div>

    `
  console.log('done')
}

body {
  background: rgb(112, 50, 154);
  background: linear-gradient(158deg, rgba(112, 50, 154, 1) 9%, rgba(29, 126, 253, 1) 100%);
  margin: 0;
  padding: 0;
  display: flex;
}

.container {
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: wrap;
}

.box {
  background-color: rgb(100, 0, 100);
  border: 1px solid rgb(183, 79, 183);
  border-radius: 10px;
  width: 157px;
  height: 200px;
  margin: 10px 10px 10px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.add {
  opacity: 70%;
}

.cir {
  background-color: rgba(250, 235, 215, 0.408);
  width: 100px;
  height: 100px;
  border-radius: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>App</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://kit.fontawesome.com/9f2b728e62.js" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container">
    <div class="box upload">
      <div class="cir">
        <i class="fa-solid fa-upload fa-2xl" style="color: #ffffff;"></i>
      </div>
    </div>
    <button class="box add" onclick="addMore()">
            <div class="cir">
                <i class="fa-solid fa-plus fa-fade fa-2xl" style="color: #ffffff;"></i>
            </div>
        </button>

  </div>

</body>
<script src="script.js"></script>

</html>

ive tried to remove any margin or padding but didnt help.i also looked at the inspect tool but there was nothing in the middle. i suspect its a feuture of flex wrap but i still couldnt find how to remove it.

unwanted space between divs when theres no margin

0 Answers0