Trying to figure out where space is coming from between my two buttons

Hey guys, I’m trying to figure out where the white spacing between the Easy and Hard buttons is coming from. I inspected the element with google chrome and it doesn’t look like there is any margin on either of the buttons, and setting margin to zero doesn’t solve the issue.

Any ideas?


Put both your buttons on one line.

Yes, as Rane says, when you put them on separate lines in your HTML, the browser sees that as whitespace that gets translated to a space character when rendered to the screen, so essentially you are unwittingly putting a space between them.

<button id="easyBtn">Easy</button><button id="hardBtn" class="selected">Hard</button>

… in your HTML should fix it.

a bit of a hack, but a negative margin-left on the Hard button works

<button id="hardBtn" class="selected" style="margin-left:-4px">Hard</button>

Thanks for all of the replies. I put both of the buttons on the same line and it all works now.

I liked the game. I forked your pen to play around with the javascript and came across something when fixed made the game look better. I think your intent was to have the 3 bottom squares only show when the level selected was HARD. I noticed you had a class called invisible in your css, but you were referring to a class called hidden in your resetGame function. I changed hidden to invisible and it works as you probably originally intended.

I also refactored your fillArray function (shrinking it and removing some repetitive code) FROM:

function fillArray(num) {
	var colors = [];
	var rgb = "rgb(";

	for(num; num > 0; num--)
		rgb += 	Math.floor(Math.random() * 256 + 1) + ", " +
			   	Math.floor(Math.random() * 256 + 1) + ", " +
			   	Math.floor(Math.random() * 256 + 1) + ")";

		rgb = "rgb(";

	return colors;


function fillArray(num) {
  var randomRGB = function() {return Math.floor(Math.random() * 256 + 1)};
	for (var colors = []; num > 0; num--) {
		var values = randomRGB() + ", " + 	randomRGB() + ", " + randomRGB();
	return colors;

I am working on a way to simplify the toggling between the EASY and HARD buttons. I will post back here when I figure out a solution with less code. I am glad you posted this in the forum, because it gives me practice at refactoring existing code.

Thank you! This project is actually from Colt Steele’s Udemy course. I veered off of his instruction quite a bit but the idea and design was originally his.

Either way, it should now work as intended.

A bit late to the reply… something I use to get rid of unnecessary white spaces in the browser and still keep the code on different lines (for readability)…

   <button id=1 ></button><!-- 

   Comment out the white space and still keep the lines separate for readability.

--><button id=2></button>

Just my 2 cents.

1 Like