1

I have a project going that requires me to construct, using flexbox, a grid of variable width buttons, that all have the same height, and are separated by a certain amount of space.

Currently, I'm spacing each button with margin: 10px 0 0 10px, which of course will be the reason why I'm having a problem. Please take a look at my JSFiddle to see what my full code is: https://jsfiddle.net/m025v4uL/1/

I've got it functioning almost perfectly, but I can't seem to get rid of the margin created space to the immediate top and left of the button area, if you see here:

Three images

It also works perfectly for this, with the same issue:

Two images

And for this (same issue, and the overlap down is intentional and will be utilized!):

Overlapping

What I want is to have space between the buttons, but not around the buttons. I am certain I'm missing the obvious here, and I really hope someone can help.

Forest
  • 938
  • 1
  • 11
  • 30
  • Do you need to have an exact, set amount of space between the objects or can that space flex? – Joshua Whitley Feb 25 '15 at 17:08
  • 1
    This question might answer yours: http://stackoverflow.com/questions/20626685/is-there-any-better-way-to-control-distance-between-flexbox-items-than-margin – Joshua Whitley Feb 25 '15 at 17:19
  • For the purposes of the project, it needs an exact amount of space, 10px. I took a look at that question and it partially resolves the problem, but there is now a weird small margin around the outside, where I wanted no margin. https://jsfiddle.net/m025v4uL/2/ – Forest Feb 25 '15 at 17:39
  • I can get rid of the left/right with a negative margin on another wrapper but getting rid of the top/bottom is another story. https://jsfiddle.net/m025v4uL/3/ – Joshua Whitley Feb 25 '15 at 21:31

0 Answers0