0

I came across a layout with a mathematical problem. I have made all my shapes to have 3 pixel gap between them, the problem I'm facing is:

1)3 Green squares are 17x17px,but I'm left with 1px gap. (Where Red arrow is pointing).

2)Teal colour boxes 30x30px and do have 3 pixels gap, but obviously they're too big. So they go beyond the boundaries of the Orange square. Need to fit them within the Orange square with 3 pixel gap.

I cant figure out how to correct this problem. What do I need to calculate first so all the shapes can have 3px distance between them.

Thank you.

enter image description here

  • Set your box size (in a given direction) to $B$ and suppose you want $n$ boxes lined up. That means you will have $n-1$ borders between boxes, and $2$ more borders between the boxes and the outside container. So you need $nB$ pixels for the boxes, and $(n+1)3$ pixeles for the spaces, plus maybe 2 more pixels for the outside box itself? (Your numbers here do not add up, so I cannot tell). So you need $nB + (n+1)3 + 2 = n(B+3) + 5$ as the dimension for your outside box. Or if $O$ is the outside, then $B = \frac{O - 5}n - 3$. If $O-5$ is not divisible by $n$, then change $O$ or $n$. – Paul Sinclair Jan 22 '24 at 20:06
  • Thank you Paul. Kind regards. – blender breath Jan 23 '24 at 01:07

0 Answers0