CSS layout - what is causing additional space - css

Question

I have created the following jsFiddle to demonstrate my problem (or lack of understanding more like)
http://jsfiddle.net/gRCS6/
And Code here
<div id="scoreboard"></div>
<canvas id="game">
Your browser does not support canvas.
</canvas>
<div id="controls">
<button type="submit" id="newGame">New</button>
<button type="submit" id="pause">Pause</button>
<button type="submit" id="help">Help</button>
</div>
#game {
border: 1px solid #000000;
background-color:#333333;
width: 250px;
margin:0px;
}
#scoreboard {
border: 1px solid #000000;
background-color:#333333;
color: orange;
width: 250px;
height: 40px;
font:36px arial,sans-serif;
text-align: right;;
}
#controls {
margin-top: -5px;
padding:0px;
}
button {
border: 1px solid #000000;
margin-left:0px;
background-color:#333333;
color: orange;
width:82px;
height: 40px;
}
Why does the div with id "controls" need a margin-top of -5px to make it touch the canvas above it?
What is taking up that 5 pixels?
What is stopping the 3 buttons from being next to each other with no space between them?

Answer 1

"Why does the div with id "controls" need a margin-top of -5px to make it touch the canvas above it?"
Like ralph.m pointed out, can be fixed by adding
canvas {
display: block;
}
"What is stopping the 3 buttons from being next to each other with no space between them?"
Well, since there are spaces (the character ' ') between the button elements in the html code you will see those spaces between the buttons when the page is displayed. You can either remove the spaces:
<button type="submit" id="newGame">New</button><button type="submit" id="pause">Pause</button><button type="submit" id="help">Help</button>
Instead of
<button type="submit" id="newGame">New</button>
<button type="submit" id="pause">Pause</button>
<button type="submit" id="help">Help</button>
Or you can try to fix it with css styling, for example by adding float: left; to the button selector.

Answer 2

The canvas element is display: inline (or is it inline-block?) by default, which means by default there is a gap at the bottom so that it will align with the baseline of any text beside it.
You can change this by setting the canvas to display: block or vertical-align: bottom.
It's a similar problem with the buttons, which are display: inline-block, meaning that there is space between them (as there is a natural space between words). As mentioned in the chosen answer, removing the white space is an option, but a more elegant solution is as follows:
#controls {word-spacing: -2em; display: table; width: 100%;}
button {word-spacing:0;}

Answer 3

Answer to Q1: Check this topic. Different browsers have different algorythm, so you should some extra parameters for body css.
body
{
margin: 0;
padding: 0;
}
Answer to Q2: Avoid using to close button tab. is not necessary, if you remove it, the margin between buttons will disappear. http://jsfiddle.net/gRCS6/5/
<button type="submit" class="button">New
<button type="submit" class="button">Pause
<button type="submit" class="button">Help

Answer 4

Another way to fix the issue is to use absolute positioning to define the exact placement of your controls div. Then you have to ability to define the exact alignment of the buttons regardless of display: inline-block; or display: block; commands.
http://jsfiddle.net/gRCS6/34/
#game {
border: 1px solid #000000;
background-color:#333333;
width: 250px;
height: 120px;
margin:0px;
position: absolute;
}
#scoreboard {
border: 1px solid #000000;
background-color:#333333;
color: orange;
width: 250px;
height: 40px;
font:36px arial,sans-serif;
text-align: right;
}
#controls {
position: absolute;
top: 172px;
margin-top: 0px;
padding: 0px;
}
button {
border: 1px solid #000000;
margin:0px;
background-color:#333333;
color: orange;
width:81.5px;
height: 40px;
}