How to set space between contained divs?

Question

The inner divs will be thumbs that are being continuously added and eventually wrap to next row.

The space between divs should be 20px. I want four divs in one row.

Two constraints:

Ideally no flexbox space-between, due to last row looking weird with only two divs.
Adding margin only between inner divs not a good option (unless there’s an easy way to do this for dynamically added content?).

Is there a way to accomplish this?

#outer {
  width: 460px;
  display: inline-block;
}

.inner {
  width: 100px;
  height: 100px;
  float: left;
}

<div id="outer">
  <div class="inner">1</div>
  <div class="inner">2</div>
  <div class="inner">3</div>
  <div class="inner">4</div>
</div>

Codepen example

`#outer > div:nth-child(n+2) { margin-left: 20px }`, oh and what's the point of the float here? — Chris W., Sep 20 '19 at 17:54
"*I want four divs in one row.*" - will new elements be added four at a time? If not, what should happen in the event of one, two or three new elements being added? — David Thomas, Sep 20 '19 at 18:02
@DavidThomas Elements don't have to be added four at a time. In any case elements should wrap to next row. Yazans and Ibrahims solutions are great. — Chris K., Sep 20 '19 at 19:13

Ibrahim Hasnat · Answer 1 · 2019-09-20T18:21:43.730

1

Try this. Hope, it will work.

I used the CSS grid. By using grid-template-columns, I have declared how four children elements of outer ID take the same area in a row. After that, I used grid-gap: 20px for giving space between four children block.

#outer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 20px;
}

edited Sep 20 '19 at 18:21

answered Sep 20 '19 at 17:55

Ibrahim Hasnat

935
1
8
16

Please explain *why* this code should be tried, explain what it does, how it works to solve the problem. Try and teach people instead of throwing blocks of unexplained code at them. Yes, I know how/why it works, but there's a very good chance that others looking for this answer won't. – David Thomas Sep 20 '19 at 18:05
@DavidThomas Thanks for your suggestion. I've updated the answer. – Ibrahim Hasnat Sep 20 '19 at 18:25
This works great, thanks a lot!! – Chris K. Sep 20 '19 at 18:51
Good to hear and you are most welcome. – Ibrahim Hasnat Sep 20 '19 at 20:42

score 1 · Answer 2 · edited Sep 20 '19 at 20:09

1

You can use this code:

.inner {
  display: inline-block;
}

.inner:not(:last-child){
  margin-right: 20px;
}

<div id="outer">
  <div class="inner">1</div>
  <div class="inner">2</div>
  <div class="inner">3</div>
  <div class="inner">4</div>
</div>

Read a reference here: css-protips

edited Sep 20 '19 at 20:09

Kevin Hernández

704
10
25

answered Sep 20 '19 at 17:57

Mohammad

183
1
10

As there can be more than 4 items, wrapped on their own row, this won't work – Asons Sep 20 '19 at 18:11

score 0 · Accepted Answer · answered Sep 20 '19 at 17:56

0

You may need to use nth-child(4n)

.inner {
  margin-right: 20px;
}
.inner:nth-child(4n){
  margin-right:0px;
}

Codepen: https://codepen.io/abozanona/pen/RwbqmZb

answered Sep 20 '19 at 17:56

Abozanona

2,261
1
24
60

score -1 · Answer 4 · answered Sep 20 '19 at 17:56

-1

You could use a margin and avoid the last one:

.inner:not(:last-of-type) {
  margin-right: 20px;
}

answered Sep 20 '19 at 17:56

Josh Davis

157
3
10

There can be more than 4 (wrapped), hence this won't work – Asons Sep 20 '19 at 18:01

How to set space between contained divs?

4 Answers4