Why are there gaps in between the squares?

Question

The code calculates an array with primes. When the primes are found it should display them as different squares. The white ones are primes and the black ones are not primes.

Why are there gaps between the white and the black squares?

https://code.sololearn.com/Wx7l3siVMy6l/?ref=app

Answer 1

You use percentage units, so real size is computed relatively to the parent size: values greater than 100 will push the square outside of the viewport and require scrolling (both horizontaly and verticaly) to be seen ^^

If your question is why white and black square doesn't have same height, it's because you define only implicitly their height by giving explicit padding-bottom height, and not primes squares doesnt have any content, contrarly to primes squares wich display the prime number...

To fix it, you can fill not primes squares with invisible content to use one line empty content with '&nbps; entities' or <br> tag elements. Or set explicit height instead padding-bottom.

Answer 2

Because you define a 'margin:0.3%;' in both .prime and .notPrime (white and black boxes) css class definitions ^^

Answer 3

Yes that is true but not what i thought i about. If you replace the number with something higher, like 128, there are some gaps with no white and no black square but as big as the black and white squares.

Answer 4

Awesome the &nbps works. Thank you.