No space between contained elements with display: table

[loopz]

This is for a responsive CSS. I have tried with margins and so on. But there is no space between the columns when they fall down at resize. Only the top and the bottom object has margin from wrapper border.

.wrapper {
display: table;
}

.object1 {
display: table-footer-group;
}

.object2 {
display: table-footer-group;
}

.object3 {
display: table-header-group;
}

//Samul

[Paulie_D]

We need a minimal Codepen.io demo of this because, at the moment, it’s not clear what this issue is.

[loopz]

Codepen of this issue: https://codepen.io/Samule/pen/erNaRJ

[Paulie_D]

Since you’re using flexbox, why not take advantage of it

https://codepen.io/Paulie-D/pen/BxNgdo

[Author]

Posts