HTMLでボタンを配置すると余白が出来てしまう

###実現したい事
HTMLでキャンバスを書いてその横にボタンを配置するとボタンのサイズによって無駄な余白が下に出来てしまうのですが、この余白をなくしたいです。方法が分かる方回答お願いします。
###HTML

HTML
1<html>
2<head>
3<title></title>
4
5</head>
6
7<body>
8<link rel="stylesheet" type="text/css" href="sample.css">
9<div  style="margin-right:auto; margin-left:auto; width:500px">
10<canvas id="canvas" width="500" height="500"></canvas><br>
11
12<input type="button" id="b1"/>
13<input type="button" id="b2"/>
14</div>
15</body>
16</html>

###CSS

CSS
1body {
2	background: #eee;
3}
4
5#canvas {
6	margin: 0px;
7	background: #ffffff;
8	border: 1px solid #aaaaaa;
9	padding:: 0px;
10}
11
12input[type="image"]{
13	padding: 0px;
14	outline: none;
15}
16#b1{
17	position: relative;
18	top:-600px;
19	left: -39px;
20	width:40px;
21	height:500px;
22	margin: 0px;
23}
24#b2{
25	position: relative;
26	top: -600px;
27	left: 450px;
28	width:40px;
29	height:500px; 
30	margin: 0px;
31}

###試したこと
ボタンのheightを50pxとかにすると下に余白は無いんですが、500pxとかにすると下に余白が出来てしまいます。

余白というのは画像の赤線で示した部分の事です

行動規範の内容に同意します

回答1件

ベストアンサー

position: relativeを指定した要素は，位置をずらした際，元々要素があった位置に空白を残します．

（高さが生まれるのは，そのせい）

親要素にposition:relative;を指定した上で，子要素にposition:absolute;を指定すると，

子要素は親要素を基準に，top,left,right,bottomを決定します

あと，linkタグはheadタグ内に記述し，HTMLのインデントも整えてください
*(全称セレクタ)を使うことで，簡易的なCSSのノーマライズを行えます

以上を踏まえ，以下のコードとしました

html
1<html>
2  <head>
3    <title></title>
4    <link rel="stylesheet" type="text/css" href="sample.css">
5  </head>
6  <body>
7    <div id="w">
8      <canvas id="canvas" width="500" height="500"></canvas><!--<br> ←要らない-->
9      <input type="button" id="b1"/>
10      <input type="button" id="b2"/>
11    </div>
12  </body>
13</html>

css
1body {
2    background: #eee;
3}
4
5*{/*added*/
6  padding: 0;
7  margin: 0;
8  box-sizing: border-box;
9}
10
11#w{/*added*/
12    position: relative;
13    margin: 50px auto;
14    width:500px;
15}
16
17#canvas {
18    /*margin: 0px;*/
19    background: #ffffff;
20    border: 1px solid #aaaaaa;
21    /*padding: 0px;*/
22}
23
24input[type="image"]{
25    /*padding: 0px;*/
26    outline: none;
27}
28#b1{
29    position: /*relative*/absolute;
30    top: /*-600px*/2px;
31    left: -39px;
32    width:40px;
33    height:500px;
34    /*margin: 0px;*/
35}
36#b2{
37    position: /*relative*/absolute;
38    top: /*-600px*/2px;
39    left: /*450px*/502px;
40    width:40px;
41    height:500px; 
42    /*margin: 0px;*/
43}