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

1

image.png1088×391 16.6 KB

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?

Thanks!

2

Put both your buttons on one line.

3

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.

4

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>
5

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

7

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.

9

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