How to create gap space using flex without using gap

Question

For browsers that don't support gap, what would be used in its place to create a 10px gap?

This is what 10px gap looks like.

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: #353198;
}

.outer {
  display: flex;
  flex-wrap: wrap;
  min-height: 100%;
  margin: auto;
  justify-content: center;
  align-content: center;
  width: 290px;
  /*gap: 10px;*/
  background: green;
}

.thePlay {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  cursor: pointer;
  border: none;
  fill: blue;
  background: transparent;
  padding: 0;
  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.7));
}

<div class="outer">
   <button class="playa thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
         <g id="play">
            <title>Play</title>
            <circle cx="32" cy="32" r="32" fill="transparent" pointer-events="visiblePainted" />
            <path d="M25.6,46.4L44.8,32L25.6,17.6V46.4z M32,0C14.3,0,0,14.3,0,32s14.3,32,32,32s32-14.3,32-32S49.7,0,32,0z
               M32,57.6C17.9,57.6,6.4,46.1,6.4,32S17.9,6.4,32,6.4S57.6,17.9,57.6,32S46.1,57.6,32,57.6z" />
         </g>
      </svg>
   </button>
   <button class="playb thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
         <use href="#play" />
      </svg>
   </button>
   <button class="playc thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
         <use href="#play" />
      </svg>
   </button>
   <button class="playd thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
         <use href="#play" />
      </svg>
   </button>
   <button class="playe thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
         <use href="#play" />
      </svg>
   </button>
   <button class="playf thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
         <use href="#play" />
      </svg>
   </button>
   <button class="playg thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
         <use href="#play" />
      </svg>
   </button>
   <button class="playh thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
         <use href="#play" />
      </svg>
   </button>
   <button class="playi thePlay" type="button" aria-label="Open">
      <svg width="100%" height="100%" viewBox="0 0 64 64">
         <use href="#play" />
      </svg>
   </button>
</div>

You can add ```space-between``` and add margin top and bottom of elements individually. — prettyInPink, Nov 19 '21 at 23:54

Kameron · Answer 1 · 2021-11-20T00:26:08.953

1

You can try:

.outer {
    justify-content: space-around;
}

EDIT: Just noticed they are not touching vertically in your img and are on mine. You can try:

svg {
  height: 95%;
}

edited Nov 20 '21 at 00:26

answered Nov 19 '21 at 23:51

Kameron

10,240
4
13
26

or `space-between` so that there is no space on the sides. – user3413723 Nov 19 '21 at 23:52
That does not create this image: https://i.imgur.com/wDTS6RU.png – Nov 19 '21 at 23:57
1

@htmlcssjava321 remove your `justify-content: center;` and it should.. I can add the snippet if you'd like? – Kameron Nov 20 '21 at 00:01
@htmlcssjava321 check the adjusted answer. – Kameron Nov 20 '21 at 00:26

score 0 · Accepted Answer · answered Nov 19 '21 at 23:56

0

You could set a class called "middle" on each of the buttons in the middle column. And then you add a margin of 10px on each side of those.

.middle {margin: 0 10px;}

answered Nov 19 '21 at 23:56

Michael

101
4

That does not create this image, can you edit your answer? https://i.imgur.com/wDTS6RU.png Your code does this: https://i.imgur.com/VsaffWu.png How would your answer be modified? – Nov 20 '21 at 00:09

How to create gap space using flex without using gap

2 Answers2